Select Box has white text on white backgroud, only visible when hover over
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?
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)
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 } */
- 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 */
- menu_unsortedBookmarks,
- menu_mobileBookmarks,
- bookmarksMenuItemsSeparator{
display: none !important; }
/* hide Bookmarks Toolbar Folder */
- 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;}
Chosen Solution
I suspect it's this:
menupopup > menuitem, menupopup > menu {
/* color of the text */
color: White !important;
}
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?
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;
}
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 */
}
Thanks for getting back to me, but I have no clue as to what that means lol!
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; }
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