`Search`: Autocomplete color contrast in Chrome
See original GitHub issueWhat 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 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...
Read more >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 .
Read more >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...
Read more >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...
Read more >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...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
@SimonFinney thanks for pointing that out! Reopening for further investigation