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

Select Box has white text on white backgroud, only visible when hover over

  • 8 replies
  • 1 has this problem
  • 5 views
  • Last reply by Paul

more options

Hi,

Since upgrading to FF100, almost all of the 'select' boxes on my webpages have white text on a white (or very light) background, and are only visible when hovered over, see attached screenshot.

How can I rectify this please?

Hi, Since upgrading to FF100, almost all of the 'select' boxes on my webpages have white text on a white (or very light) background, and are only visible when hovered over, see attached screenshot. How can I rectify this please?
Attached screenshots

Chosen solution

I suspect it's this:

menupopup > menuitem, menupopup > menu {
  /* color of the text */    
  color: White !important;
}
Read this answer in context 👍 1

All Replies (8)

more options

If I disable my userchrome.css the problem is not there, so it may be that.

/*tighten drop down menus*/ menupopup > menuitem, menupopup > menu {

 padding-block: 1px !important;

}

root {
 --arrowpanel-menuitem-padding: 1px 1px !important;

}

/* changed this block ----------------------------------------------------*/ /* #bookmarksMenuPopup hbox {background:#CD5C5C !important;} */ /* /Change highlighted menu text to any color:/ */ /* menupopup > menu[_moz-menuactive="true"], */ /* menupopup > menuitem[_moz-menuactive="true"], */ /* popup > menu[_moz-menuactive="true"], */ /* browsermessage,notification .notification-inner{ border-color: red !important;} */ /* browsermessage, notification{ background-color: red !important;} */ /* menupopup { */ /* -moz-appearance: none !important; */ /* background-color: #CD5C5C !important } */

  1. bookmarksMenuPopup { --panel-background: #CD5C5C !important;}

menupopup > menu[_moz-menuactive="true"], menupopup > menuitem[_moz-menuactive="true"], popup > menu[_moz-menuactive="true"], browsermessage,notification .notification-inner{ border-color: red !important;} browsermessage, notification{ --panel-background: red !important;} menupopup {-moz-appearance: none !important; --panel-background: #CD5C5C !important }

/* other bookmarks */

  1. menu_unsortedBookmarks,
  2. menu_mobileBookmarks,
  3. bookmarksMenuItemsSeparator{

display: none !important; }

/* hide Bookmarks Toolbar Folder */

  1. bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu+menuseparator {display: none !important;}

menupopup > menuitem, menupopup > menu { /* color of the text */ color: White !important; }

menupopup > :is(menuitem, menu):hover {

 background-color: lightskyblue !important;

}

/* Global UI font */

  • {font-size: 13pt !important;

font-weight: bold !important;}

more options

Chosen Solution

I suspect it's this:

menupopup > menuitem, menupopup > menu {
  /* color of the text */    
  color: White !important;
}
more options

Hi jscher2000,

You are right, however deleting that also turns my bookmark menu and popup menu text black on my dark red theme and not as easily readable.

See here: [https://support.mozilla.org/en-US/que.../1376213] link

So if that solution is wrong, is there something else I can do to have white text on my bookmark and popup menus?

more options

Changed my userchrome.css with these, and it works for me:

menupopup > menuitem, menupopup > menu { /* color of the text */ color: lightblue !important; }

menupopup > :is(menuitem, menu):hover {

 background-color: yellow !important;

}

more options

I found this in some code on my website and I think the reason for the :not() was to avoid affecting the <menuitem>s which are within <select> controls:

menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  /* your rules go here */ 
}
more options

Thanks for getting back to me, but I have no clue as to what that means lol!

more options

It means if you want white text on menus but not in certain form control drop-downs, you need to tweak your selectors to exclude any menupopup which has class="in-menulist" -- and here how:

menupopup:not(.in-menulist) > menuitem, menupopup:not(.in-menulist) > menu {   color: white !important; }

more options

OK, thanks for the explanation.

I have now used that, and reverted to my preferred (original) menus, and now all is well.

Thank you so much.

Modified by Paul