当サイトはユーザー体験を改善するためのメンテナンスを実施中に機能が制限される予定です。記事を読んでもあなたの問題が解決せず質問をしたい場合は、Twitter の @FirefoxSupport、Reddit の /r/firefox で、サポートコミュニティが皆さんを助けようと待機しています。

Mozilla サポートの検索

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.

詳しく学ぶ

このスレッドはアーカイブに保管されました。 必要であれば新たに質問してください。

unable to change background of selected tab in userChrome.css

  • 2 件の返信
  • 1 人がこの問題に困っています
  • 65 回表示
  • 最後の返信者: 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

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