Resize Firefox Search Bar

Firefox is a great web browser and one of it’s coolest features is the customizable search bar (located to the right of the address bar). However, in my opinion, the search bar is too small. It’s fine for typing in one word search phrases, but anymore than two search words get truncated. Here is a short tutorial that will show you how to make the search bar larger.

To make the search bar longer, we need to add a couple of CSS rules to a file named userChrome.css. This file is located in your profile directory and can sometimes be hard to find. So our first task will be to install the Chrome Edit extension to make finding and modifying this file easier.

You can install the Chrome Edit Extension from : http://downloads.mozdev.org/cdn/chromedit/chromedit.xpi

After installing the extension, restart Firefox.

Next, click on the Tools menu and choose Edit User Files. You will be shown a new window that has five tabs on it. These tabs represent all of the user files that you can modify to customize the Firefox browser. The first tab will be named userChrome.css – this is the file that we want to modify.

Scroll to the end of the file and add the following CSS rule:

/* Make the Search box flex wider(in this case 400 pixels wide) */
#searchbar {
-moz-box-flex: 400 !important;
}
#search-container {
-moz-box-flex: 400 !important;
}

Save the file, by clicking the Save button at the bottom of the Chrome Edit window and restart Firefox.

Now you will notice that your search bar is bigger, and in fact will resize itself as you resize the browser window.

10 thoughts on “Resize Firefox Search Bar

  1. /* Make the Search box flex wider */
    #search-container {-moz-box-flex: 800 !important;
    }
    #searchbar {
    -moz-box-flex: 400 !important;}

    the 2nd line is needed to change the actual size of the text box.
    (choose numbers to suit) without it you get a smaller url bar and the search bar stays at the same size!

    chrome edit currently isnt working
    so you need to find your profile
    and create userchrome.css

    find userchromeExample.css
    add the lines to it and save as
    userChrome.css

  2. doesnt seem to work for me either.

    I used your chrome edit with a previous version of firefox to change the userchrome.css and it worked.

    but manually doing it doesnt seem to work. I too am using a theme now. Could that be the problem?

  3. In Firefox 2.0 you’ll need to do this instead (change 250px to suit you):

    /* Make the Firefox Search box flex wider */
    #search-container, #searchbar {
    width: 250px !important;
    }

Comments are closed.