Tweak Firefox 3 location bar autocomplete menu

A common complaint about Firefox 3’s location bar is that the autocomplete menu is too long because of the big font sizes, that the page title grabs too much attention compared to the address or that the address is too difficult to read.

While the default colors and sizes is still under review, you can tweak it right now to better suit your taste. Just add this code to your userChrome.css file:

.ac-comment {
font-size: 100%! important;
color: #444444 ! important;
}

.ac-comment[selected=”true”] { color: #FFFFFF !important; }

.ac-url-text {
font-size: 100% ! important;
color: #000077 ! important;
}

.ac-url-text[selected=”true”] { color: #FFFFFF !important; }

.ac-comment refers to the title styling which I have changed to be the same size (100%) as the address and a lighter gray. .ac-url-text refers to the address which I have set to blue.

It looks like this now:

Tweak Firerfox 3 location bar autocomplete menu

You can play with different font-size values and proportions and colors. For color codes, check W3Schools.

You can also reduce the number of suggestions in the autocomplete menu with this tip.

Update: Added CSS code to change the text color when selected. Thanks David.

33 thoughts on “Tweak Firefox 3 location bar autocomplete menu”

  1. I love this time when betas come and I get to learn all kind of tweaks. 🙂

    Thank you for sharing this. This was really something that i wanted to change.

    Now, if only you could make a post with some FX3 only extensions, and if they have anything special.

  2. Wow – your styling of it makes it look much more beautiful! Hopefully Mozilla will change it into something like this before the final release.

  3. Ok, I found it for myself. Here’s an addition to the tip:

    If you want to change the colour for selected items, use the following rules:

    .ac-comment[selected=”true”] { color: #fff !important; }

    .ac-url-text[selected=”true”] { color: #fff !important; }

  4. Pingback: 关于Firefox3 – Someus.cN
  5. Pingback: Про Firefox Українською » Архів » Секрети Firefox 3 (!): змінюємо вигляд адресної п
  6. Much much better know.

    Autocomplete was really getting on my nerve.
    Thanks to you I get to keep this feature.
    Was about to get rid of it.

  7. Pingback: thebadness.org » Hardy? Hardly
  8. Pingback: www.rdoering.net
  9. Very nice tweak!
    Love the new search function in location bar, I really think it is a big improvement. But have to say I also find the default dropdown design to big.
    Couldn’t really figure out what part of the code that does it, but for some reason, Percy Cabello (thread author) your code makes the results totally blue, when chosen, so you can’t read them.
    The code from Timothy Babych’s userstyle doesn’t…
    Here is a image illustrating the matter: http://img47.imageshack.us/img47/5169/3differentlookscomparisvq4.png
    I experienced a bit and took the (in my opinion) best part from the two codes and made my own. Here is my code:
    .ac-comment {
    font-size: 100%! important;
    color: #333 ! important;
    }

    .ac-comment[selected=”true”] { color: white !important; }

    .ac-url-text {
    font-size: 100% ! important;
    color: #000077 ! important;
    }

    .ac-url-text[selected=”true”] { color: #FFFFFF !important; }

    Here is another image with a comparison of the 4 different color codes of the two scripts: http://img47.imageshack.us/img47/7249/the4colorscomparisonuy6.png

    1. The reason Percy’s code makes selected text go totally blue is because of a small error.
      Where it has [selected=”true”], it uses closing-style quotation marks on both sides. If you copy and paste that, Firefox doesn’t seem to like it. Best to change it to straight style quotation marks.

      Still a very useful tweak though.

  10. Even better is to set the url-text size to 0. Also tweaked some other stuff. Use the following chrome. (Tested on ubuntu)

    .ac-comment {
    font-family: monospace !important;
    font-size: 95%! important;
    color: #444444 ! important;
    }

    .ac-comment[selected=”true”] { color: #FFFFFF !important; }

    .ac-url-text {
    font-size: 0% ! important;
    color: #000077 ! important;
    }

    .ac-url-text[selected=”true”] { color: #FFFFFF !important; }

  11. @asdfg:
    Aha! you’re right.
    The two places it says [selected=”true”], changing the ” to ‘ resolves “selected text go totally blue” problem
    This fix makes my previous posted code unnecessary…

    @Vasu:
    You’re code make it look like this for me: http://img168.imageshack.us/img168/8521/vasucodegy9.png
    = Links is no longer showed… I don’t like that appearance. But of course: We all have some different tastes
    Peace

    1. yackediyack :
      The fonts are too small on the machine I guess. My objective was to remove the URLs. The reason is, for many website the information that is shown is good enough. Also, if you scroll down the location bar items, you can see the URL in the address bar. I like it that way!.

  12. @Matthew:
    LOL :P. Yeah I believe that is why you don’t see that much difference… I only have a single 17″ monitor. Your is almost double as big :O.

  13. Thank you. I thought it was hard to skim through with all the same color text. I pay more attention to URLs than page titles whenever remembering where I was and wanting to get back.

  14. My Firefox 3 address bar is broken. It doesn’t auto-complete URL’s the way FF2 did, or for that matter, the way IE, Safari and Opera do. Instead, it seems my bookmarks, search results and other stray pages I’ve visited are leaking into the address bar. Is there a way to fix this or do I have to upgrade to Netscape Navigator Gold?

  15. thats great and all, but what about those of us who want the new firefox to behave just as the old firefox.. that is, i dont want to see anything except URLS appear in the URL auto complete. i dont give a damn about the font size, i just dont want to see the website titles at all.. how would i go about this??

    1. The ‘one click’ solution is Seth Spitzer’s add-on: https://addons.mozilla.org/en-US/firefox/addon/6227

  16. hey nice thing,
    but i have one question?
    where to find this auto complete list means where the Mozilla store all the information?

  17. Hello, I’m new to this & I’m experiencing some difficulty that I don’t know how to solve. It’s driving me crazy!!

    So I opened Notepad, pasted the code, and renamed the file to “userChrome.css”. Then, I copied it into Mozilla Firefox / defaults / profile / chrome because that was where I could find the “chrome directory of your profile folder.” It worked for the title styling, which shrank to the same size as the URL. However, the colors stayed true: jet black title and bright blue URL. I even tried to use the code for crimson, then restarted Firefox, but the color wouldn’t even tint!!!! Argh!!

    I seriously don’t know where I went wrong. Please help me out. Thank you very much!

  18. I tried looking for “userChrome.css” but there’s no such thing on my Vista computer; all I found was “userChrome-example.css”, but there’s no “profile” directory or file, either. Suggestions?

  19. Helpful article but there’s nothing like (NOT) implementing an obvious, easy, menu-driven checkbox way of turning OFF the annoying firefox “inventions”. Firefox developers: Where’s the checkbox that says “Don’t display location bar page titles” or where’s the config option of say, browser.urlbar.titledisp=0 etc. Come on, stop force-feeding hardcoded user interfaces to everyone.

Comments are closed.