搜尋 Mozilla 技術支援網站

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

了解更多

unable to change background of selected tab in userChrome.css

more options

I've followed several instructions online. Here is my current attempt in userChrome.css: tab[selected="true"] {

 -moz-appearance:none !important;
 background-color:lime !important;
 color:indigo !important;
 font-weight:bold !important;

} tab:not([selected="true"]) {

background:darkcyan !important;
color:black !important;

} tab:hover {

background:lime !important;
color:red !important;

} I can change the background color or background or text color or font in any area but whatever changes I make to background or background-color in selected tab doesn't work. The rest works: I've changed the text color and style of the selected tab but I just can't seem to change the background no matter what I try. I've tried it with an without the -moz-appearance directive, I've tried several different colors expressed as names or rgb values with or without alpha channel. The color of the active tab remains the color of the window which is the same as the other windows on my desktop. I'm using Firefox 61.0.1 (64-bit) on Linux Mint 19 fresh install a few days ago. Is this a Linux Mint thing? Am I doing something wrongly? Is there a reference for all the items that can be styled in userChrome.css? thanks, in advance

I've followed several instructions online. Here is my current attempt in userChrome.css: tab[selected="true"] { -moz-appearance:none !important; background-color:lime !important; color:indigo !important; font-weight:bold !important; } tab:not([selected="true"]) { background:darkcyan !important; color:black !important; } tab:hover { background:lime !important; color:red !important; } I can change the background color or background or text color or font in any area but whatever changes I make to background or background-color in selected tab doesn't work. The rest works: I've changed the text color and style of the selected tab but I just can't seem to change the background no matter what I try. I've tried it with an without the -moz-appearance directive, I've tried several different colors expressed as names or rgb values with or without alpha channel. The color of the active tab remains the color of the window which is the same as the other windows on my desktop. I'm using Firefox 61.0.1 (64-bit) on Linux Mint 19 fresh install a few days ago. Is this a Linux Mint thing? Am I doing something wrongly? Is there a reference for all the items that can be styled in userChrome.css? thanks, in advance

被選擇的解決方法

Thank you. I used only part of your solution. I set a separate section just for the background because I couldn't seem to set the font weight and color in that .tab-background section. Here is my final solution:

.tab-background[selected="true"] {

 background-color:darkturquoise !important;

} tab[selected="true"] {

 color:indigo !important;
 font-weight:bold !important;

} tab:not([selected="true"]) {

background:darkcyan !important;
color:black !important;

} tab:hover {

background:lime !important;
color:red !important;

}

I appreciate your help cor-el. {p.s. Any relation to Kal-El?}

從原來的回覆中察看解決方案 👍 0

所有回覆 (2)

more options

The tab background is set on the element with this class name: .tab-background Some selectors can be quite long depending on the them you use.

See this file for some rules (as a start, search for .tab-background).

  • chrome://browser/skin/browser.css

There is this main rule and a few more further down Line #3922 :

.tab-background[selected=true] {
  border-top-color: var(--tabs-border-color);
  background-color: var(--toolbar-bgcolor);
  background-image: var(--toolbar-bgimage);
  background-repeat: repeat-x;
}

Further down there is this line with a rather long selector that has a quite high [developer.mozilla.org/Web/CSS/Specificity Specifity]. Line #3938 :

/* Lightweight theme on tabs */
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-attachment: scroll, scroll, fixed;
  background-color: transparent;
  background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
                    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
                    var(--lwt-header-image, none);
  background-position: 0 0, 0 0, right top;
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-size: auto 100%, auto 100%, auto auto;
}
more options

選擇的解決方法

Thank you. I used only part of your solution. I set a separate section just for the background because I couldn't seem to set the font weight and color in that .tab-background section. Here is my final solution:

.tab-background[selected="true"] {

 background-color:darkturquoise !important;

} tab[selected="true"] {

 color:indigo !important;
 font-weight:bold !important;

} tab:not([selected="true"]) {

background:darkcyan !important;
color:black !important;

} tab:hover {

background:lime !important;
color:red !important;

}

I appreciate your help cor-el. {p.s. Any relation to Kal-El?}