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

Using the box-shadow approach works, however this doesn't solve the problem of font color - example is black shadow, white font. — Marco Moretti, Jul 12 '19 at 04:57

n1kkou · Answer 1 · 2019-02-26T07:16:04.747

11

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

edited Feb 26 '19 at 07:16

answered Nov 13 '15 at 07:59

n1kkou

3,096
2
21
32

score 8 · Accepted Answer · answered Jun 08 '11 at 21:04

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

score 2 · Answer 3 · answered Nov 17 '15 at 18:13

2

To reset the styles:

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

this worked for me.

answered Nov 17 '15 at 18:13

mezod

2,313
3
21
31

score 1 · Answer 4 · answered Jun 08 '11 at 17:11

1

Please override the default css, which is

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

answered Jun 08 '11 at 17:11

Wolfgang Kuehn

12,206
2
33
46

3

This works to make the text readable. Unfortunately it appears to be impossible to set the background-color or background-image (even using !important) because the user agent stylesheet for chrome has the background-color and background-image already set using !important. – Matthew Jun 08 '11 at 20:51
Matthew is right, using the snippet of my answer solves this without needing to use !important. I am overriding a different property but the final result is what we expect. A white bg! – mezod Nov 17 '15 at 18:14

Override style of saved password field in google chrome

4 Answers4