Removing input background colour for Chrome autoco

Question

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.

The design I'm working on is using light text on a dark background, so this really messes up the look of the form - I have stark yellow boxes and near-invisible white text. Once the field is focused, the fields return to normal.

Is it possible to stop Chrome changing the colour of these fields?

Answer 1

Google Chrome user agent prevent developers' CSS, So for changing autofill UI must use another property like these:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}

Answer 2

I give up!

Since there is no way to change the color of the input with autocomplete I decide to disable all of them with jQuery for webkit browsers. Like this:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

Answer 3

For those who are using Compass:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

Answer 4

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
}

Answer 5

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 {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Answer 6

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);
    });
});}