0

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

I know there are exact duplicates, but none of the answers on them solved my issue (for example How do I stop Chrome from yellowing my site's input boxes?).

When chrome autofills a field it becomes yellow, for some reason. Example picture here: http://nclabs.org/screenshots/1295269850.png

What I want:

  • A CSS or Javascript (even jQuery) solution that prevents the background (not :focus outline!) to become yellow on autofill.
  • That solution must leave the autofill feature intact.

Does anyone know a solution? Thanks!

Community
  • 1
  • 1
orlp
  • 112,504
  • 36
  • 218
  • 315
  • These "possible duplicates" have no answers that work and keep the autofill feature intact. – orlp Jan 17 '11 at 13:32
  • Well that is a browser GUI feature and it's very unusual to let web developers mess with the browsers GUI - because it's not theirs to mess with. – RoToRa Jan 17 '11 at 14:24
  • 1
    This "feature" is part of the webdesign and it's not theirs to mess with. (they as in Chrome developers) – orlp Jan 17 '11 at 15:24

2 Answers2

0

You can use this jQuery to disable the feature:

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
}

But there is no way to change the color of the autofill.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • This doesn't comply with my second need: "That solution must leave the autofill feature intact." – orlp Jan 17 '11 at 13:31
  • Agreed, that's why I said there's no way to change the color if it :) You can either disable it or have it yellow. These are your options unfortunately. – Kyle Jan 17 '11 at 13:34
0

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

mingos
  • 23,778
  • 12
  • 70
  • 107