Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`Search`: Autocomplete color contrast in Chrome

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Cancel search icon button color contrast is off due to recently introduced skyblue background color for autofill in Chrome - https://support.google.com/docs/thread/4024179?hl=en

Issue Analytics

State:
Created 4 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

3reactions

j1miecommented, Dec 3, 2019

There are two approaches to fixing this:

Fix the icon fill for the offending pseudo classes .bx--search-input:-internal-autofill-selected ~ .bx--search-close { fill: currentColor; }
Ensure that the background color of the clear button is no longer transparent.

I used the first option as a quick fix in our project, but I’m thinking now that I prefer the second option as a longer term fix because it doesn’t involve going down the road of learning / overwriting strange browser-specific pseudo classes.

1reaction

abbeyhrtcommented, Dec 13, 2019

@SimonFinney thanks for pointing that out! Reopening for further investigation

Top Results From Across the Web

Discover and fix low-contrast text with Chrome DevTools

Contrast ratio in the color picker Inspect the word "very". In the Styles pane, click on the color preview of the CSS property...

Change Autocomplete Styles in WebKit Browsers - CSS-Tricks

The default styling only affects the background color, but most other properties apply here, such as border and font-size .

Accessibility Wins — Google Chrome's Color Contrast Debugger

We do a lot of work to test color contrast in the axe-core library and browser extensions, and I know that it isn't...

Use Chrome with accessibility extensions - Google Support

Find & add accessibility extensions To find accessibility extensions for Chrome, visit the Chrome Web Store and ... High Contrast (adjust or remove...

Removing input background colour for Chrome autocomplete?

I find this to be better than the accepted answer... the box-shadow method is clever and does work, but when a user is...