Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

সহায়তা খুঁজুন

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.

আরও জানুন

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

  • 8 উত্তরসমূহ
  • 1 এই সমস্যাটি আছে
  • 5 দেখুন
  • শেষ জবাব দ্বারা 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?
স্ক্রিনশটসমূহ সংযুক্ত হয়েছে

সমাধান চয়ন করুন

I suspect it's this:

menupopup > menuitem, menupopup > menu {
  /* color of the text */    
  color: White !important;
}
প্রেক্ষাপটে এই উত্তরটি পড়ুন। 👍 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

চয়ন করা সমাধান

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.

Paul দ্বারা পরিমিত