CSS needed to change yellow autocomplete background color

User Help for Mozilla Firefox
Post Reply
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

CSS needed to change yellow autocomplete background color

Post by kukla »

By default, Firefox sets a very bright yellow background highlight for autocomplete login fields, here and elsewhere.

Would appreciate having a CSS with a more neutral background color. The CSS itself with a different background color, which I can always adjust later, is important. The current border colors on focus or not should remain as they are, it's only the yellow background color of the login fields which I would like to change.

Image
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: CSS needed to change yellow autocomplete background colo

Post by morat »

Try something like:

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("http:"), url-prefix("https:") {
  input[type="text"],
  input[type="password"] {
    color: black !important;
    background-color: white !important;
  }
}
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: CSS needed to change yellow autocomplete background colo

Post by kukla »

Thanks morat, but doesn't appear to have any effect at all, either in userChrome.css or userContent.css.
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: CSS needed to change yellow autocomplete background colo

Post by morat »

Try this:

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("http:"), url-prefix("https:") {
  input:autofill {
    color: blue !important;
    background-color: lime !important;
    filter: none !important;
  }
}
Remember to fill in the username and password to test the style.

P.S.

The input element background color is #fffcc8 using the devtools color picker, but I think it's styled using the filter css property.

Bug comments
http://bugzilla.mozilla.org/show_bug.cgi?id=1555466#c11
http://bugzilla.mozilla.org/show_bug.cgi?id=1555466#c12

Reference
http://searchfox.org/mozilla-release/se ... 3Aautofill
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: CSS needed to change yellow autocomplete background colo

Post by kukla »

Many thanks, that works just fine (changed the background, and text field color.) Much, much better than that hideous yellow forced upon us.

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("http:"), url-prefix("https:") {
  input:autofill {
    color: #0d0a09 !important;
    background-color: f6f2f1 !important;
    filter: none !important;
  }
}
Image
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: CSS needed to change yellow autocomplete background colo

Post by kukla »

Not a deal killer by any means, since it's almost EOL, but surprisingly doesn't work at all in the 78.14 esr, which I still have.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: CSS needed to change yellow autocomplete background colo

Post by jscher2000 »

kukla wrote:Not a deal killer by any means, since it's almost EOL, but surprisingly doesn't work at all in the 78.14 esr, which I still have.
Code for older versions (as of Firefox 67):

https://support.mozilla.org/en-US/quest ... er-1225233
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: CSS needed to change yellow autocomplete background colo

Post by kukla »

Thanks, will see what happens with that CSS in the 78.
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: CSS needed to change yellow autocomplete background colo

Post by kukla »

Yep, that works for the 78 in userContent.css.
Post Reply