How do I stop Chrome from yellowing my site's input boxes?
Among other text and visual aids on a form submission, post-validation, I'm coloring my input boxes red to signify the interactive area needing attention.
On Chrome (and for Google Toolbar users) the auto-fill feature re-colors my input forms yellow. Here's the complex issue: I want auto-complete allowed on my forms, as it speeds users logging in. I am going to check into the ability to turn the autocomplete attribute to off if/when there's an error triggered, but it is a complex bit of coding to programmatically turn off the auto-complete for the single affected input on a page. This, to put it simply, would be a major headache.
So to try to avoid that issue, is there any simpler method of stopping Chrome from re-coloring the input boxes?
[edit] I tried the !important suggestion below and it had no effect. I have not yet checked Google Toolbar to see if the !important attribute would work for that.
As far as I can tell, there isn't any means other than using the autocomplete attribute (which does appear to work).
Solution 1:
Set the CSS outline property to none.
input[type="text"], input[type="password"], textarea, select {
outline: none;
}
In cases where the browser may add a background color as well this can be fixed by something like
:focus { background-color: #fff; }
Solution 2:
I know in Firefox you can use the attribute autocomplete="off" to disable the autocomplete functionality. If this works in Chrome (haven't tested), you could set this attribute when an error is encountered.
This can be used for both a single element
<input type="text" name="name" autocomplete="off">
...as well as for an entire form
<form autocomplete="off" ...>
Solution 3:
this is exactly what your looking for!
// Just change "red" to any color
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px red inset;
}
Solution 4:
By using a bit of jQuery you can remove Chrome's styling while keeping the autocomplete functionality intact. I wrote a short post about it here: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});}