I came across a very irritating bug in Google Chrome the other day where the form Chrome autocomplete feature adds a yellow background to the input fields, making the design for my pretty app, look rather ugly. After a quick investigation I discovered that there is currently no way to disable this, even with an !important declaration to override the following user agent style:

It would appear that that this issue actually goes back many years: Auto-filled input text box yellow background highlight cannot be turned off!

Security and usability reasons aside for the moment, we should, in my opinion, be able to have complete control over the aesthetics of form styles when developing a site or web application. A popular css tricks article does try to address this problem and provides a snippet to style the Chrome autocomplete input background, however it no longer works: Change Autocomplete Styles in WebKit Browsers – I guess it did once upon a time, maybe Chrome for some insane reason force this behaviour on us, well, I’m not having it!

You can indirectly remove the yellow background colour by obscuring the input with a large, inset white box shadow:

The above snippet works a treat, however it is rather aggressive, what if you want to apply more than one box shadow to the input; one for when the input has been focused for example? Well, you can simply chain your box shadow declarations together:

Snippet

LEAVE A COMMENT

Notify of
avatar
wpDiscuz