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!

為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Change color of menu pop ups

more options

Hi,

I have a red theme (Red Fade) which I like.

However the menus when you click anything on the menu bar (File, Edit etc) remain the default colour (see screenshot attached). I would like these to be red also. Is it possible to change this background colour preferably using the userChrome.css file or alternatively an add-on? I know how to edit the userChrome file, so would like the code if possible please.

Thanks in advance, Paul.

Hi, I have a red theme (Red Fade) which I like. However the menus when you click anything on the menu bar (File, Edit etc) remain the default colour (see screenshot attached). I would like these to be red also. Is it possible to change this background colour preferably using the userChrome.css file or alternatively an add-on? I know how to edit the userChrome file, so would like the code if possible please. Thanks in advance, Paul.
附加的畫面擷圖

所有回覆 (3)

more options

You would need to use something like this CSS code to change that menu colour:

/* Changes background color */
menupopup, popup,
popup > menu > menupopup,
menupopup > menu > menupopup {
    -moz-appearance: none !important;
    background: black !important;
}

/* Changes the color of the separator lines */
menupopup menuseparator {
    -moz-appearance: none !important;
    background: white  !important;
    padding: 0 !important;
    border-color: transparent !important;
}

/* Changes the text color */
menupopup menu,
menuitem {
    -moz-appearance: none !important;
    color: white !important;
}

/* Changes the hover colors */
menupopup menu:hover,
menuitem:hover {
    -moz-appearance: none !important;
    color: black !important;
    background-color: skyblue !important;
}

/* Changes the arrow of the submenu to light color
    Remove this if you want to keep the arrow a dark color */
.menu-right{
    filter: invert(100%) !important;
}

Hope this helps.

If you need more CSS tweaks like this, I'd recommend visiting the FirefoxCSS Reddit. It's an entire community of people who are able to help with this kind of thing.

more options

Thanks for your help, I tried the first one, as I think that is what I am looking for. Unfortunately it does not work.

more options

Unfortunately, the FirefoxCSS subreddit is probably your best bet on this issue. There are tons of people on there who will likely be able to help you find/create the perfect CSS code to fix your issue.