On a form I\'m working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.
If you want to keep the autocomplete functionality intact you can use a bit of jQuery to remove Chrome's styling. 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);
});
});}
I have a better solution.
Setting the background to another color like below didn't solve the problem for me because I needed a transparent input field
-webkit-box-shadow: 0 0 0px 1000px white inset;
So I tried some other things and I came up with this:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
Thanks Benjamin!
The Mootools solution is a little more tricky, as I can't get fields by using $('input:-webkit-autofill')
, So what I've used is the following:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
window.addEvent('load', function() {
setTimeout(clearWebkitBg, 20);
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
$(elems[i]).addEvent('blur', clearWebkitBg);
}
});
}
function clearWebkitBg () {
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
var oldInput = $(elems[i]);
var newInput = new Element('input', {
'name': oldInput.get('name'),
'id': oldInput.get('id'),
'type': oldInput.get('type'),
'class': oldInput.get('class'),
'value': oldInput.get('value')
});
var container = oldInput.getParent();
oldInput.destroy();
container.adopt(newInput);
}
}
function getElems() {
return ['pass', 'login']; // ids
}
The previous solutions of adding a box-shadow works well for people who need a solid colour background. The other solution of adding a transition works, but having to set a duration/delay will mean that at some point it may show again.
My solution is to use keyframes instead, that way it will always show the colours of your choosing.
@-webkit-keyframes autofill {
0%,100% {
color: #666;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
Example Codepen: https://codepen.io/-Steve-/pen/dwgxPB
In addition to this:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
You might also want to add
input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
Other wise, when you click on the input, the yellow color will come back. For the focus, if you are using bootstrap, the second part is for the border highlighting 0 0 8px rgba(82, 168, 236, 0.6);
Such that it will just look like any bootstrap input.
I had an issue where I couldn't use box-shadow because I needed the input field to be transparent. It's a bit of a hack but pure CSS. Set the transition to a very long amount of time.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}