Mozilla will shut down Pocket’s services on July 8, 2025. At that time users will no longer be able to access the Pocket website, apps and API. You can export your saved items and API data until October 8, 2025 before they are permanently removed. For more information, see this article.

Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

How to change the Tab color for inactive tabs?

  • 5 replies
  • 1 has this problem
  • 848 views
  • Last reply by mmanville16

davidhelp
davidhelp

How to change the Tab color for inactive tabs?

I have a userChrome file and have been able to change the color of the active tab but cannot do so for the inactive tab. The inactive tab color blends into the toolbar color. If I move my mouse cursor over it changes to a slight darker gray color.

Active tab color. I made mine a off white color:

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

   background-color: #f9f7f1 !important;

}

How to change the Tab color for inactive tabs? I have a userChrome file and have been able to change the color of the active tab but cannot do so for the inactive tab. The inactive tab color blends into the toolbar color. If I move my mouse cursor over it changes to a slight darker gray color. Active tab color. I made mine a off white color: .tab-background[selected="true"] { background-color: #f9f7f1 !important; }
Attached screenshots

Chosen solution

Thanks terry21 That was the answer. I have changed the colors around to what I like.

Read this answer in context 👍 0

All Replies (5)

Terry
Terry

I set tab colours differently. Since your code is working, I suggest that you repeat it but change [selected="true"] to not([selected="true"]):not(:hover) { ....

EDIT: Change the background-color value as well, presumably.

Modified by Terry

davidhelp
davidhelp Question owner

Hello I have tried this but not working. As long as the active tab can change color then that is good enough.

Thanks

Terry
Terry

I must admit I haven't seen that format. The following is more conventional and works. 

.tabbrowser-tab[selected] .tab-content {
  background-color: #CCFFCC !important; }
.tabbrowser-tab:hover:not([selected]) .tab-content {
  background-color: #9CC6FC !important; }
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  background-color: #D0E4FE !important; }

You can add other attributes such as color and font-weight.

davidhelp
davidhelp Question owner

Chosen Solution

Thanks terry21 That was the answer. I have changed the colors around to what I like.

mmanville16
mmanville16

I do not have userChrome.