I'm getting a light gray highlight on hover with the built-in "Light" theme:

If you are using the "Default" theme -- which is the most unpredictable due to picking up various colors from your operating system -- could you test the Light and Dark themes to see whether the highlight is visible on your Firefox using either of those themes? More info on themes: Built-in themes in Firefox - alternative to complete themes.

I'm getting a light gray highlight on hover with the built-in "Light" theme: If you are using the "Default" theme -- which is the most unpredictable due to picking up various colors from your operating system -- could you test the Light and Dark themes to see whether the highlight is visible on your Firefox using either of those themes? More info on themes: Built-in themes in Firefox - alternative to complete themes.

Thank you for your reply. I was actually using the dark theme. I did try switching to the light theme, and the highlight appeared again. The default theme for some reason shows the following message (image). I guess I will continue to experiment with other dark themes (not a light theme kind of a guy), and hope that the built in dark theme is fixed soon. Thanks again!

I'm getting a light gray highlight on hover with the built-in "Light" theme: If you are using the "Default" theme -- which is the most unpredictable due to picking up various colors from your operating system -- could you test the Light and Dark themes to see whether the highlight is visible on your Firefox using either of those themes? More info on themes: Built-in themes in Firefox - alternative to complete themes.

Thank you for your prompt response. I was actually using the dark theme, and when switching to the light one the highlighted selections appeared again. The default theme shows an error message (default could not be verified for use in firefox and has been disabled). I will tinker with other dark themes and cross my fingers that this issue is resolved in the built in dark theme soon. Many thanks again.

jscher2000 said

I'm getting a light gray highlight on hover with the built-in "Light" theme: If you are using the "Default" theme -- which is the most unpredictable due to picking up various colors from your operating system -- could you test the Light and Dark themes to see whether the highlight is visible on your Firefox using either of those themes? More info on themes: Built-in themes in Firefox - alternative to complete themes.

Thank you for your prompt response. I was actually using the dark theme, and when switching to the light one the highlighted selections appeared again. The default theme shows an error message (default could not be verified for use in firefox and has been disabled). I will tinker with other dark themes and cross my fingers that this issue is resolved in the built in dark theme soon. Many thanks again.

Actually, I wasn't able to find any dark theme with which this issue is resolved!

Okay, I see that on the built-in Dark theme, too. There is a bug on file for this (dating back to Firefox 70?), but no recent action. I'll mention that this came up here today.

Meanwhile, if you use the down arrow key to select, you still should get the normal reversed highlight style (white text on blue background), but if you are used to using the mouse, I'm sure that's not a pleasant adjustment.

Another possibility would be to use a custom style rule to override the hover color. It will take a little research to create a recipe for that...

The default theme shows an error message (default could not be verified for use in firefox and has been disabled).

Hmm, that's really weird. Maybe a file got corrupted somewhere. If you don't plan to use the Default theme anyway, may not be worth digging into at this point since I can confirm the problem with the Dark theme.

So there is some linkage between the hover colors on form autocomplete drop-downs and some other parts of Firefox, but I haven't tested that in detail. This custom style rule will make the hover color the same on the Dark theme as on the Light theme.

Setting this up is a little bit involved, so please set aside 10 quiet minutes to work through it.

(For anyone who already has a userChrome.css file set up, you just need to add the rules under (A) to your file.)

(A) Select and copy the following style rule code

/* Light gray background hovering autocomplete list on dark theme */
#main-window[lwt-popup-brighttext="true"] #PopupAutoComplete 
  richlistitem.autocomplete-richlistitem:hover {
    background-color: hsla(0,0%,80%,.35) !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that file browser window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you downloaded in Step B into the chrome folder you created in Step C

(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rule.

Success?

Once you start tweaking the interface this way, you'll probably find more and more things you want to do. I suggest bookmarking the pages where you get the code for future reference because changes to Firefox may break them and it's easier to request an update if you can find the source.

So there is some linkage between the hover colors on form autocomplete drop-downs and some other parts of Firefox, but I haven't tested that in detail. This custom style rule will make the hover color the same on the Dark theme as on the Light theme. Setting this up is a little bit involved, so please set aside 10 quiet minutes to work through it. (For anyone who already has a userChrome.css file set up, you just need to add the rules under (A) to your file.) (A) Select and copy the following style rule code

/* Light gray background hovering autocomplete list on dark theme */
#main-window[lwt-popup-brighttext="true"] #PopupAutoComplete 
  richlistitem.autocomplete-richlistitem:hover {
    background-color: hsla(0,0%,80%,.35) !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that file browser window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you downloaded in Step B into the chrome folder you created in Step C

(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rule.

Success?

Once you start tweaking the interface this way, you'll probably find more and more things you want to do. I suggest bookmarking the pages where you get the code for future reference because changes to Firefox may break them and it's easier to request an update if you can find the source.

I followed all the steps to the teeth, and still no luck! I actually discovered a chrome folder with one file called "userContent.css" I moved this file out of that folder, and changed the value of "toolkit.legacyUserProfileCustomizations.stylesheets" to true, after adding the userChrome.css file in there. Restarted Firefox and still nothing!

Hmm, I wonder what went wrong. What if you simply the rule to this (i.e., remove that first line of selectors):

/* Light gray background hovering autocomplete list on dark theme */
richlistitem.autocomplete-richlistitem:hover {
    background-color: hsla(0,0%,80%,.35) !important;
}

Hmm, I wonder what went wrong. What if you simply the rule to this (i.e., remove that first line of selectors):

/* Light gray background hovering autocomplete list on dark theme */
richlistitem.autocomplete-richlistitem:hover {
    background-color: hsla(0,0%,80%,.35) !important;
}

Still no result!

Maybe we should try something very obvious to test whether the file is being read. This will created a fat block of red at the left end of the toolbar area:

#navigator-toolbox {
  border-left: 50px solid red !important;
}

Does that work on yours?

Maybe we should try something very obvious to test whether the file is being read. This will created a fat block of red at the left end of the toolbar area:

#navigator-toolbox {
  border-left: 50px solid red !important;
}

Does that work on yours?

Yes it does!

I don't know what the problem is, sorry. Maybe someone else can see why the background-color rule would work for me and not for you. It just takes the background-color used on the Light theme and, I thought, forces it on the Dark theme (or potentially any theme).

I don't know what the problem is, sorry. Maybe someone else can see why the background-color rule would work for me and not for you. It just takes the background-color used on the Light theme and, I thought, forces it on the Dark theme (or potentially any theme).

OK. Thank you for your help so far. I hope someone else can take it from here, or an update drops with a fix to this issue.