Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

unable to change background of selected tab in userChrome.css

  • 2 ответа
  • 1 имеет эту проблему
  • 3496 просмотров
  • Последний ответ от randdeveloper

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

Выбранное решение

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