Would you like to make the Firefox Awesome Bar drop-down menu semi-transparent like in Google Chrome?  Here’s a quick trick that can make your Firefox Awesome Bar a bit more awesome.

When you type an address or search query into the address bar in Google Chrome, the drop-down list of history and search suggestions that appears is slightly transparent.  Nothing extreme, but it adds a nice touch.

Firefox’s Awesome bar, on the other hand, is fully opaque by default.

We can change that with a simple change.  Exit Firefox, then open your Firefox profile folder by entering the following in the address bar in Explorer or in the Run command:

%appdata%\Mozilla\Firefox\Profiles\

Open the default folder, and then open the Chrome folder in it.

Now, open the userChrome.css file in an editor such as Notepad.  If you do not have a userChrome.css file, open the userChrome-example.css file instead.

Now, add the following to the end of the file:

#PopupAutoCompleteRichResult[type="autocomplete-richlistbox"]
{
    opacity: 0.9 !important;
}

You can change the opacity value, but 0.9 seemed the closest to Chrome’s transparency while keeping the text readable.

Save the file as userChrome.css in that same folder.  If you’re editing with Notepad, make sure to select to save as All Files so the file won’t be saved with a .txt extension.

Open Firefox, and now your Awesome Bar’s drop-down list will be transparent.  Actually, it may look even more awesome than Google Chrome’s address bar!

Conclusion

With this simple trick, you can make your Firefox Awesome bar a bit more awesome.  With tweaks like this, it’s no wonder Firefox is still so popular.

Special thanks to Daniel Spiewak for the tip!