Updated: May 25, 2026
Most modern software interfaces are bad. They are designed to look cool, not to be ergonomic or functional. Indeed, they lack contrast, color, they are not intuitive, and they are not fun. Firefox, my favorite dear tragic browser, is a good example of this issue. Mozilla has introduced lots of changes for the sake of it over the years, usually with degraded levels of usability and efficiency. I have written extremely detailed tutorials on how to undo most of these changes, including Proton guides one and two and three, UI customization guide, and even how to edit the address bar (URL bar) color in Firefox 143. This last article worked splendidly until the recent version 151 update. That one broke my customization, and the URL bar is now gray. Again.
I went online to see if anyone has already resolved this, and to my astonishment, there was not a single article offering up-to-date information. I fired up a debugging session, and started tinkering with every conceivable URL-related identifier and class, and through the process of slow, grueling elimination, added and removed those to my userChrome.css file. Eventually, I succeeded, and on top of that, I think my result is prettier than the default. So let me show you. After me.
You will need a couple of new declarations
In Firefox 143, I merely needed to use the class instead of the identifier for the urlbar element. Now, though, we need two new classes: urlbar-input and urlbar-input-box. Very simple. White background:
.urlbar-input, .urlbar-input-box {
background-color: white !important;
}
The URL bar goes from this:
To a much nicer:
And then, you can even add a bit more padding, so the URL is not set flush with the left side.
.urlbar-input, .urlbar-input-box {
background-color: white !important;
padding-left: 5px !important;
}
This will work splendidly with your multi-account containers, too. The URL now stands more clearly, and as a bonus, this single tweak also affects the search box, if you have it set up separately.
And here you go, peace and logic restored:
Additional elements
In case you want to play some more, please consider testing all of the following:
/* IDs */
#urlbar-input
#urlbar-input-box
#urlbar-container
/* Classes */
.urlbar-input
.urlbar-input-box
.urlbar-container
Conclusion
I hope this article brings you much needed and timely resolution to the Firefox 151 urlbar change. I really wonder what sort of scientific decision rests behind this? Make the places you visit even less obvious? Punish anyone above the age of 25 and/or with any sort of taste? Why make things harder to read? Luckily, still, you can relatively easily fix this, with a single new declaration in your CSS. Shame that you need this to begin with, but that's "modern" for you. Bleak and soulless.
You can do much more. If you look at my screenshots above, damn, so much pale gray. What happened to color and happiness? I guess those died with the Internet around 2014 or so, once we switched from a global world of information sharing to the smartphone-social Dystopia. I use fully colored container tabs, I use accent color for selected elements. I try to make my Firefox behave as much as possible. And remember, despite all its woes, it's still the go-to browser, and I use it anywhere I can, including Android, with mandatory UBlock Origin for peace and sanity. So there. Now, you can too continue using your Firefox without getting angry at random pseudo-artistic changes. And start getting ready for Nova, the next-gen Australis. Oh oh.
Cheers.