How Do I Tweak Colors in Autofill in Firefox?

[geedeez]

Hi everyone...

Theres a feature in ff called autofill. When it pops up in text fields to autofill personal info, its background is white and hard to see. I want the background dark. I tried debugger devtools to find the code. But I can't find it. Hope you can help. Below is the image and link.

http://www.sunsfurniture.com/contact/

> https://s33.postimg.cc/7dvwkdrrz/image.png

[geedeez]

bump

[Frank Lion]

http://www.sunsfurniture.com/contact/

> https://s33.postimg.cc/7dvwkdrrz/image.png

If it was me, I'd be hitting this for those entries -

Code: Select all

#PopupAutoComplete > richlistbox > richlistitem

In the 2nd picture, the yellow message in the dropdown suggests to me that you are using an extension here and you should be asking the extension dev about all this.

[geedeez]

http://www.sunsfurniture.com/contact/

> https://s33.postimg.cc/7dvwkdrrz/image.png

If it was me, I'd be hitting this for those entries -

Code: Select all

#PopupAutoComplete > richlistbox > richlistitem

Hi Frank,

Where exactly should I post this code? Would it be something like the following? Let me know where to post it. Appreciate it.

Code: Select all

#PopupAutoComplete > richlistbox > richlistitem {
background: #222 !important;
}

[Frank Lion]

Where exactly should I post this code?

userChrome.css - http://forums.mozillazine.org/viewtopic ... #p14789746

Would it be something like the following?

Code: Select all

#PopupAutoComplete > richlistbox > richlistitem {
background: #222 !important;
}

Close, but you never, ever, define a background colour without also defining the font colour. This is because you never know if/when the OS or website might have different ideas on the font colour and you'll see nothing.

So...this...and then adjust the colours to suit you -

Code: Select all

#PopupAutoComplete > richlistbox > richlistitem {
background: #222 !important;
color: #FFFFFF !important;}

N.B. the font colour for that website above is #FFB41D

[geedeez]

Where exactly should I post this code?

userChrome.css - http://forums.mozillazine.org/viewtopic ... #p14789746

Hi Frank,

Yes I put it in userChrome.css but nothing happens. It doesnt change the background color at all. What do you suggest?

[Frank Lion]

Hi Frank,

Yes I put it in userChrome.css but nothing happens. It doesnt change the background color at all. What do you suggest?

The code works and does what you want, so you need to carefully review how you created the chrome folder and its files in your profile. Check the Troubleshooting section as well in the KB link - people sometimes don't have their OS set up to show file extensions.

If in doubt, use the automatic creation method detailed in that Knowledge Base link.

[geedeez]

Hi Frank,

Yes I put it in userChrome.css but nothing happens. It doesnt change the background color at all. What do you suggest?

The code works and does what you want, so you need to carefully review how you created the chrome folder and its files in your profile. Check the Troubleshooting section as well in the KB link - people sometimes don't have their OS set up to show file extensions.

If in doubt, use the automatic creation method detailed in that Knowledge Base link.

Hi Frank,

Yeah sure I'll look into it. Appreciate the help.

[geedeez]

Hi Frank,

I disabled all addons including Stylus which contained all my css. And I moved userContent.css and all files which serve as references to css which affect FF directly to another folder on the desktop. The only file I had in the Chrome folder was userChrome.css which contained your code. Below is the code in userChrome.css which again includes your code. Let me know what other suggestions you have. Thanks.

Code: Select all

@import url("1 - Side Panel, Bookmarks, Add-ons Background.css");
@import url("2 - Options, Add-ons, Extensions Page.css");
@import url("3 - Right-click Menu, URL, History Sidebar.css");
@import url("4 - Menu Dark.css");
@import url("5 - Library.css");
@import url("6 - Dev Tools.css");
@import url("7 - Global.css");
@import url("8 - About FF.css");

/* [webextension-view-type="popup"] {
  margin-right: -17px !important;
  margin-bottom: -17px !important;
} */


#PopupAutoComplete > richlistbox > richlistitem {
background: #222 !important;
-moz-appearance:none !important;
color: #FFFFFF !important;
}

[Frank Lion]

Let me know what other suggestions you have.

I only do tested code snippets in Firefox Support these days and then only rarely. Other people then take over, if needed.

dickvl and Aris are very good on this stuff. But.... I'd throw a namespace line into that lot, for a start.

[geedeez]

Let me know what other suggestions you have.

I only do tested code snippets in Firefox Support these days and then only rarely. Other people then take over, if needed.

dickvl and Aris are very good on this stuff. But.... I'd throw a namespace line into that lot, for a start.

Ok thanks.