How to set the background color of Firefox' URL bar with userChrome.css?

Question

I'm trying to change the background color of my Firefox URL bar using userChrome.css. Following these steps, I added the code below to my userChrome.css (inside <profile>/chrome):

@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
    #urlbar {
        background-color: red !important;
    }
}

It didn't work at all. How could I get to do it?

Answer 1

First, you need to set toolkit.legacyUserProfileCustomizations.stylesheets preference to true in about:config, as described here.

Now, the right CSS identifier to be used is #urlbar-background:

@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
    #urlbar-background{
        background-color: red !important;
    }
}

(I learned that from this file; the whole repository is quite instructive.)