question-mark
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

Search

Issue Analytics

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

github_iconTop GitHub Comments

3reactions
j1miecommented, Dec 3, 2019

There are two approaches to fixing this:

  1. Fix the icon fill for the offending pseudo classes .bx--search-input:-internal-autofill-selected ~ .bx--search-close { fill: currentColor; }

  2. 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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found