Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Change background highlight of URL Dropdown options on hover/select

more options

I just downloaded Firefox Quantum 59.0.2 (64-bit).

In the URL dropdown, when I hover over different URLs, the highlight is so pale that it's invisible, so I can't clearly see what I'm selecting. I need to clearly see (in blue background) the item that is highlighted, so that I know what to click on.

Can I change this?

I just downloaded Firefox Quantum 59.0.2 (64-bit). In the URL dropdown, when I hover over different URLs, the highlight is so pale that it's invisible, so I can't clearly see what I'm selecting. I need to clearly see (in blue background) the item that is highlighted, so that I know what to click on. Can I change this?

Chosen solution

Okay, here's how you do it. You're going to create (or download) an empty text file named userChrome.css, and then paste in some rules that override the light gray hover color to the white-on-blue selected item colors. Here's how; take your time because the folder and file names need to be just right for this to work.

(A) You need to create a new chrome folder in your profile folder. This article has the steps for that (#1, #2, and optionally #3)

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

(There's a boring voiceover video if you are more of a visual person.)

(B) Download the following (blank) file and move it into that chrome folder:

https://www.userchrome.org/samples/userChrome.css

(C) Open the file in an editor like Notepad or WordPad, or you could download a better editor if you like

(D) Paste the following style rules into the file, save in the same plain text format as the original file, and exit

  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover {
    background-color: Highlight !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-title, 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-url, 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-action,
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-separator {
    color: HighlightText !important;
  }

(E) Exit Firefox and start it up again, and Firefox should find and apply the rules in the file.

Success?

Read this answer in context 👍 0

All Replies (14)

more options

Off topic but critical security issue of unimaginable magnitude , please update Flash 18.0 r0 now. Since it is so old please do this : https://helpx.adobe.com/flash-player/kb/uninstall-flash-player-windows.html then : Flash Player Version: 29.0.0.113 Current Version https://get.adobe.com/flashplayer/otherversions/ Step 1: Select Operating System Step 2: Select A Version (Firefox, . . . .) Note: Other software is offered in the download. <Windows Only>

Since just about all websites can over rule what you may enter into Options --> General --> Language & Appearance (which you can change) maybe a Extension/Customize would be of help like : https://www.accessfirefox.org/Firefox_Accessibility_Themes.php or https://addons.mozilla.org/en-US/firefox/addon/link-alert/ usserChrome https://www.userchrome.org/what-is-userchrome-css.html could be done but I do not know the code for doing that though some one else here might.

Please let us know if this solved your issue or if need further assistance

more options

First of all, how did you find out I have an older Flash? I only gave you the version number. Firefox Quantum 59.0.2 (64-bit).

more options

ukw1980 said

First of all, how did you find out I have an older Flash?

Next to your question, under "Question Details", there's a link for "More System Details" which shows two data points: (1) the description of your Flash plugin, and (2) the "user agent string" given by your browser.

ukw1980 said

In the URL dropdown, when I hover over different URLs, the highlight is so pale that it's invisible, so I can't clearly see what I'm selecting. I need to clearly see (in blue background) the item that is highlighted, so that I know what to click on.

The standard background color when I hover an item on Windows 7 is a pale gray, so that definitely could be improved. Would you want it to be the same shade of blue that appears when you arrow down (active/selected color) or a different shade?

more options

I want the background-highlight to be Blue, just like it was in all prior versions! Right now it's only blue at the top current selection. The highlight needs to be Blue as I hover over different URLs so that I can see clearly what I'm selecting, before I select.

more options

ukw1980 said

I want the background-highlight to be Blue, just like it was in all prior versions! Right now it's only blue at the top current selection. The highlight needs to be Blue as I hover over different URLs so that I can see clearly what I'm selecting, before I select.

Hi

In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see How do I create a screenshot of my problem?

Once you've done this, attach the saved screenshot file to your forum post by clicking the Browse... button below the Post your reply box. This will help us to visualize the problem. As well as your description of what is wrong and what it should be or want it to be.

Thank you!

more options

Chosen Solution

Okay, here's how you do it. You're going to create (or download) an empty text file named userChrome.css, and then paste in some rules that override the light gray hover color to the white-on-blue selected item colors. Here's how; take your time because the folder and file names need to be just right for this to work.

(A) You need to create a new chrome folder in your profile folder. This article has the steps for that (#1, #2, and optionally #3)

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

(There's a boring voiceover video if you are more of a visual person.)

(B) Download the following (blank) file and move it into that chrome folder:

https://www.userchrome.org/samples/userChrome.css

(C) Open the file in an editor like Notepad or WordPad, or you could download a better editor if you like

(D) Paste the following style rules into the file, save in the same plain text format as the original file, and exit

  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover {
    background-color: Highlight !important;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-title, 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-url, 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-action,
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-separator {
    color: HighlightText !important;
  }

(E) Exit Firefox and start it up again, and Firefox should find and apply the rules in the file.

Success?

more options

Jscher2000 understood my description perfectly: "The standard background color when I hover an item on Windows 7 is a pale gray , so that definitely could be improved"

Just click the URL dropdown, and move the mouse across different options without selecting anything. What do you see? A barely-visible light gray color that follows your selection. It's so pale/light that you can't see what you're selecting. As you move your mouse the selection should be blue or some dark color to show what the mouse is on right now. Is that clear enough?

more options

Here's a screenshot comparison of the hover bar, before and after.

more options

No unfortunately it didn't work. I pasted that file into the '/chrome' folder under both my immediate Profile folder, and also the general /profiles folder (I created 2 /chrome subfolders just in case), pasted the file in both, restarted, but didn't work. I created the CSS file exactly as instructed with just the pasted content.

The file userChrome.CSS with the content above now exists in both - ...\Mozilla\Firefox\Profiles\f94i1ceq.default-1522636604563\chrome (from My Profile) - ...\Mozilla\Firefox\Profiles\chrome

Restarted FF several times. Still see the gray bar. Your screenshot is exactly what needs to happen.

Modified by ukw1980

more options

You definitely don't need any extra subfolders. It can really only be this:

Profiles\[profilefolder]\chrome\userChrome.css

Firefox even insists on all lower case except the C in the middle of userChrome.css.

If you retrace your steps, can you find it in that spot?

Also, can you verify that the file extension didn't get changed? The "How to" article has a section on showing file extensions to make sure .txt didn't get tacked on in the editing process.

more options

Yes, the CSS is definitely here:

\Profiles\f94i1ceq.default-1522636604563\chrome\userChrome.css

It does not have any extra suffixes, verified via Right-Click->Properties. (Type of File: CSS File) I am editing it in Notepad++. I verified that it contains:


 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover {
   background-color: Highlight ;
 }
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-title, 
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-url, 
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-action,
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-separator {
   color: HighlightText ;
 }

The Profile dir. was obtained from Help -> Troubleshooting Information -> My Profile Directory. There are no other profiles listed under /Profiles, only this one, f941-...

Modified by ukw1980

more options

Okay, let's have a play in the Browser Toolbox.

To set that up, open the Web Developer panel. Either:

  • Ctrl+Shift+i
  • menu button > Web Developer > Toggle Tools

On the top bar there should be a gear icon whose hover text is Toolbox Options. In the lower right of Advanced Settings, check the last two boxes (Enable browser chrome and add-on debugging toolboxes, Enable remote debugging). You can close this panel now.

Call up the Browser Toolbox from the developer tools. Either:

  • Ctrl+Alt+Shift+i
  • menu button > Web Developer > Browser Toolbox

Usually you get a blank window, and a separate prompt to confirm you want to allow the remote connection from yourself to yourself. You may need to use the Firefox icon on the Windows toolbar to find the prompt.

Once the Browser Toolbox populates, you can switch to the Style Editor. In the left column, userChrome.css will be listed somewhere. I usually click once in the scroll bar to get to the second group and find it there.

If you don't find userChrome.css, there's a problem with the file not loading for some reason. If your Firefox is starting in Firefox Safe Mode, that will block loading. Otherwise, it should load.

Assuming you find it, you could experiment with the colors. For example, change Highlight to blue or HighlightText to yellow. Anything?

See also: https://developer.mozilla.org/docs/Tools/Browser_Toolbox

more options

Incredible, I was able to fix it by adding !important to both of your styles!

When the CSS file looks like this, it starts working!!

 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover {
   background-color: Highlight !important;
 }
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-title, 
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-url, 
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-action,
 #PopupAutoCompleteRichResult .autocomplete-richlistitem:hover .ac-separator {
   color: HighlightText !important;
 }

Thanks for the tip about userChrome.css. Now I can finally see what I'm selecting, finally a return to the sanity of the older FF versions, rather than this new garbage.

Modified by ukw1980

more options

ukw1980 said

Incredible, I was able to fix it by adding !important to both of your styles!

I wonder how that got lost in the shuffle? I'm glad to hear it's working as designed.