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?
2
Answers
This should do the trick
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):
If this still doesn’t work, try to debug it yourself using the Browser Toolbox: