css Question posted in
Some basic documentation can be found here.

Firefox 124: How to change background color of active tab, in userChrome.css?

The following code, appended to userChrome.css, no longer works:

.tab-background[selected="true"] {
    background-color: #dd9933 !important;
    background-image: none !important;
}

Literally everything I could find online including this site and reddit, recommended this, but to no avail. The active tab is a tiny shade of gray darker than the other tab, and not orange as I defined it here.

I am not a person with visual impairment but even for me it’s hard to make out the active tab in a sea of inactive tabs because the color is just off by 5% or so.

Frustrating how Mozilla keeps moving these CSS settings around what what worked a month ago has to be broken the next month for no apparent reason. Anyone have any insights of what the CSS for the day is?

Tags:

2

Answers


  1. 0

    This should do the trick

    .tab-background[selected] {
    background-color: #dd9933 !important;
    background-image: none !important;
}
    Login or Signup to reply.
  2. 0

    Maybe the CSS selector for the active tab(s) has changed with the new Firefox version.

    What many don’t know is that you can inspect the browser itself with the dev tools, just like you would inspect a web page and its DOM; it’s called Browser Toolbox in Firefox.

    After taking a look at the element in question in the Inspector, you’ll be able to see the element itself, its attributes, and the applied CSS styles.

    In your case, I would suggest using the attribute selector that the Firefox browser itself uses to style its active tabs (as can be seen in the following screenshot):

    .tab-background:is([selected], [multiselected])

    Firefox Browser Toolbox Inspector

    If this still doesn’t work, try to debug it yourself using the Browser Toolbox:

    • Is your CSS file loaded and applied at all?
    • Is it really overriding Firefox’s default applied CSS rule? Check the specificity of your applied CSS selector.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search