How to Stop Chrome from Yellowing My Site's Input Boxes

How do I stop Chrome from yellowing my site's input boxes?

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" ...>

Google Chrome disable yellow input form field (NO FLASH)

You could hide the elements with CSS

/* may as well target Chrome (catches Safari too tho) */
@media screen and (-webkit-min-device-pixel-ratio:0){ 
    input{
        opacity:0;
    }
}

Then show them after that webkit business kicks in.

$('input').css({opacity:1});

Yes they'll be invisible on load but that shouldn't really be noticeable.

Eliminate the yellow highlight that Chrome do in the textfiels on html forms

As far as I know there is no real good solution out there at the moment since this style is marked as !important by Chrome. A known workaround means to disable autocomplete like this:

<form autocomplete="off">
 <input type="text" name="fieldname" />
</form>

There are several issues raised in the chromium google code project where you could vote on but this issue seems to be a never ending story (first issue was started in 2008):

• Auto-filled input text box yellow background highlight cannot be turned off!
• Auto-filled input text box yellow background highlight cannot be turned off!

Removing input background colour for Chrome autocomplete?

You can change input box styles as well as text styles inside input box:

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

Google Chrome autofill yellow background

[2018 UPDATE]

As per the comment by Matt K, it appears that it is now possible. You can refer to this answer for a solution: https://stackoverflow.com/a/25881221/798634

Quote:

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

[ORIGINAL 2011 ANSWER]

Unfortunately, either you disable autocomplete (possibly via JavaScript - see Kyle's answer) or you're doomed to use the gross yellow background. Chrome's internal CSS takes all styling possibilities away from you. This issue dates back to 2008 and still hasn't been solved.

Removing input background colour for Chrome autocomplete?

You can change input box styles as well as text styles inside input box:

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

How do I stop Chrome from pre-populating input boxes?

autocomplete="off" worked on our site.

Google Chrome form autofill and its yellow background

Change "white" to any color you want.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

---

Related Topics