Turn Firefox 3’s Location Bar Yellow at https:// URLs

Turn Firefox 3’s Location Bar Yellow at https:// URLs

One noticeable change between Firefox 2 and Firefox 3 is the yellow address bar background, which turned on in Firefox 2 when you visited encrypted web sites—the ones that start with https://. After much debate among the developers, Firefox 3 dropped that visual cue, but on Windows, with a little userChrome.css tweak, you can have that yellow background back. Here’s how.

If you’ve got the Stylish extension installed, you can simply add a new style that contains:

#urlbar[level].autocomplete-textbox-container { background-color: #FFFFB7 !important; }

Otherwise, here’s how to manually edit your userChrome.css and add that code to it.

Note: this tweak does NOT work on the Mac, just Windows. (Not sure about Linux, feel free to let us know in the comments if you try it.) Also, there was long debate and solid reasoning behind the decision to “de-yellow” https:// sites, here’s more on that.

We’re on the hunt for the best userChrome.css and Stylish tweaks for Firefox 3, since many of the ones we knew and loved in Firefox 2 no longer work. So fess up: what are your must-have user styles or userChrome.css additions for Firefox 3?


  • The addition of the “> *” bit, as posted by anon above, worked for me also in Fedora 8 Linux. If you’re using a dark theme that has white text on a dark background color in the url bar, the white on yellow is unreadable.

    You can either input a darker shade of yellow, or any color you want, and/or set the text color to a dark color for contrast:

    /* Turn address bar background yellow when on secure sites */
    #urlbar[level] .autocomplete-textbox-container > * {
    background-color: #20F750 !important;
    color: #000000 !important; }

Show more comments

Log in to comment on this story!