2

I'm trying to override the yellow background color Chrome puts in for -webkit-autofill text elements. But even though the Inspector tool tells me Chrome is applying my own css rule, the computed style is still yellow. Here's what I mean:

inspect element display

Here's a codepen of the issue. Click on the input field to give it focus and then select something from the dropdown list. (Chrome uses the 'name' attribute to find matching autocomplete options so you may need to change it to something you've used before to get the autocomplete dropdown to show)

Why isn't the computed style for this element white instead of yellow?

Jamie
  • 2,181
  • 1
  • 21
  • 35
  • 3
    Can you post a code example please? – j08691 Jun 24 '14 at 16:14
  • 1
    possible duplicate of [Override browser form-filling and input highlighting with HTML/CSS](http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css) – JDB Jun 24 '14 at 16:17
  • 1
    duplicate of [Google Chrome form autofill and its yellow background](http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background) – greggreg Jun 24 '14 at 16:20
  • @JDB @greggreg I'd like to know why this is the case - there are plenty of workarounds covered in the questions you linked. But those questions cover how to get around the "special" `-webkit-autofill` selector, instead of what exactly it is. – Jamie Jun 24 '14 at 16:32
  • @Jamie - When using non-standard selectors, you get into the realm of vendor-specific browser implementations. At that point, typically only the project manager or developer can tell you "why". – JDB Jun 24 '14 at 16:38
  • @JDB So what makes `:-webkit-autofill` different from, say, `:visited`? – Jamie Jun 24 '14 at 16:40
  • 1
    @Jamie - `:visited` is part of the [official standard](http://dev.w3.org/csswg/selectors3/#link). There are a few "non-official standards" (we tend to call them "conventions") - for example, before HTML5, closing tags were technically required by the standard, but in practice browsers were pretty good at rendering correctly even if they were omitted. Then there are the vendor-specific definitions, such as anything beginning with "-moz" (Firefox), "-webkit" (Chrome), "-ms" (Internet Explorer) or "-o" (Opera), among others. – JDB Jun 24 '14 at 19:04

1 Answers1

0

Apparently you can't override this, and need to use a hack as a workaround:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
Steve Sanders
  • 8,444
  • 2
  • 30
  • 32
  • Huh, that's the solution I found [http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css](http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css). But why can't you just use a CSS rule? – Jamie Jun 24 '14 at 16:18
  • @Jamie, that is a css rule. – greggreg Jun 24 '14 at 16:22
  • I mean use the `background-color` css property :P. Is this specific to -webkit-autofill? And why does Chrome have such a contradiction in the inspect element panel? – Jamie Jun 24 '14 at 16:26
  • Different browsers render things differently – imbondbaby Jun 24 '14 at 16:39