This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

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

Chosen solution

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?}

Read this answer in context 👍 0

All Replies (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

Chosen Solution

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?}