Override style of saved password field in google chrome

Question

I'm designing a web application and the general style involves white text on a dark background.

This style includes using a custom (dark) image for the username and password fields, with white text.

If users log in using google chrome and choose to save their login details for the form, on the next visit the username and password fields appear as pale yellow with white text, making it nearly impossible to read. This looks really bad.

How would I go about overriding this style, preventing google chrome from changing the background of the saved username and password fields.

<style type="text/css">
  input {
    border: none;
    background: url('darkinput.png');
    color: #fff;
  }
</style>

<input type="text" name="email" id="text" /> 
<input type="password" name="password" id="text" />

EDIT: Currently (google-chrome v11.0.696.57) the user agent stylesheets contain !important overrides to set both of the following:

input:-webkit-autofill{
  background-color: rgb(250, 255, 189) !important;
  background-image: none !important;
}

There is an issue report for this at the url below, and I encourage everyone who reads this to vote it up:

http://code.google.com/p/chromium/issues/detail?id=46543

Answer 1

Just setting a shadow will fix that:

input:-webkit-autofill { 
  -webkit-box-shadow:200px 200px 100px white inset; 
  box-shadow:200px 200px 100px white inset; 
}

Answer 2

To fully disable auto complete (and therefore removing the style issue) you can try this:

<form autocomplete="off">
...
</form>

However another possibility would be to use jquery to remove the style after the page load.

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

Answer 3

To reset the styles:

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

this worked for me.

Answer 4

Please override the default css, which is

input:-webkit-autofill {
  background-color: #FAFFBD !important;
  background-image:none !important;
  color: #000000 !important;
}