Hi Tarun, I'm not sure I understand what you need. Is this for a bookmark menu (for example, dropping from the Bookmarks Toolbar) or for the address bar Autocomplete/"Firefox suggest" list?

What does the background look like currently?

By the way, a good resource for personal assistance with userChrome.css rules is:

https://www.reddit.com/r/FirefoxCSS/

Can you post your previously used code for userChrome.css, so we can see what you want to achieve?

Thanks for the response.

Below is what I had which was working in older versions of firefox. I listed them by items.

Can you please review and let me know what changes are needed to make it work in latest firefox version?

In my case legacyuserprofilecustomizations is enabled and true.

My import variable in userchrome.css starting of the file is below line.

@import url(userChrome_Fx56_bookmark_icons.css);

Please let me know on what changes are needed.

Item 1 >>>>> 
===============
Below section is for Customizing search results background and foreground colors */

@import url(userChrome_Fx56_bookmark_icons.css);

#PopupAutoCompleteRichResult {
    background-color:black !important;
	font-family: Calibri !important;
    -moz-border-top-colors:black !important;
    -moz-border-top-colors:black !important;
    -moz-border-left-colors:black !important;
    -moz-border-right-colors:black !important;
}

Item 2 >>>> 
===============

/* Below section is for width and color of search results bar below address bar */

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    font-family: Calibri !important;
	height: 1000px !important; /* Original value which fits 14" laptop screen is 698px*/
	background-color:black !important;
}

#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
#PopupAutoCompleteRichResult .ac-action-text {
    font-family: Calibri !important;
	font-size: 14pt !important;
	color:white;
}

#PopupAutoCompleteRichResult .ac-url-text {
    font-family: Calibri !important;
	font-size: 13pt !important;
	font-style: italic !important;
	color:#6699FF;
}

#PopupAutoCompleteRichResult richlistitem:first-of-type[type*="heuristic"],
#PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="searchengine"],
#PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="visiturl"],
#PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="keyword"] 
{ background-color:#2F4F4F !important;
  font-family: Calibri !important;
}


>>>> Item 3
===============

Below were the other code parts I had to customize URL dropdown in firefox.

/****** Below code is highlighting bookmarks in url dropdown ******/

.autocomplete-richlistitem[type="bookmark"] /*background gun metal (dark grey) for bookmarks*/
{
background-color: #000040;
/*background: #000066 !important;*/
}

/****** Below code is highlighting line selected in url dropdown bar ******/

.autocomplete-richlistitem[selected=true] {
  background: #654321 !important;  
}

/****** Below code is highlighting line for mouse over in url dropdown bar ******/

#PopupAutoCompleteRichResult .autocomplete-richlistitem:hover {
 /*background: #FF6347 !important;*/
 background: #696969 !important;
 }

 /****** Below code is scrollbar in url dropdown bar ******/

 #PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox {
   overflow-y: auto !important; 
   padding-right: 3px !important;
 }
 
/* Below is the code for listing the switch tab, then bookmarks, then history in url bar dropdown */

  #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="switchtab"]{
    -moz-box-ordinal-group: 2;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="bookmark"]{
    -moz-box-ordinal-group: 3;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="favicon"]{
    -moz-box-ordinal-group: 4;
  }

Thanks - Tarun!!

I think this is an old style sheet from one of my sites:

@import url(userChrome_Fx56_bookmark_icons.css);

Hopefully that isn't causing the problem; I don't think it relates to background colors.

I think the selectors #PopupAutoCompleteRichResult , .autocomplete-richlistbox , .autocomplete-richlistitem became obsolete around Firefox 75 when the "megabar" styling rolled out. There was a setting in Firefox 75-76 to hold that back, so maybe that is why you're just seeing it now??

I think the successor selector for

#PopupAutoCompleteRichResult .autocomplete-richlistitem

would be

.urlbarView-row

but I haven't tested a rewrite with that selector.

-moz-box-ordinal-group is no longer supported, instead use order with a value one less.

 #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="switchtab"]{
   order: 1;
 }
 #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="bookmark"]{
   order: 2;
 }
 #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="favicon"]{
   order: 3;
 }

Only .ac-title-text and .ac-url-text seem to exist if I search the source code

• https://searchfox.org/mozilla-release/search?q=ac-%5Ba-z%5D%7B3%2C6%7D-text&path=&case=false&regexp=true

You should no longer use selected=true, but use only selected.

.autocomplete-richlistitem[selected] {

Thanks guys for the response. I am not a CSS developer or expert. userchrome.css file I built, I did it by googling and putting together all the values.

You guys are the experts in Firefox customization stack. I will send you my complete userchrome.css file. Can you make changes and do the cleanup and send me the working userchrome.css file which I can use? I would really appreciate that.

I love firefox and hate to switch to Chrome or Edge even though that's what most of the companies are recommending. I love firefox and features it offers.

Let me know.

Thanks - Tarun!!

Hey Guys checking back on this thread.

I can send my complete userchrome.css file. Can FIrefox team make changes and do the cleanup and send me the working userchrome.css file which I can use?

Please let me know.

Best is to ask advice on the Firefox CSS subreddit forum as they may know more about your code.

• https://www.reddit.com/r/FirefoxCSS/

Also, please don't paste long selections of CSS (or any other kind of code) into this forum, which often misinterprets code characters as wiki markup. To share a userChrome.css file, you can use Pastebin or, if you have a Github account, create a Gist.