Resize Firefox Search Bar

by Tom Mullaly on October 31, 2004

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 :

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.

Be Sociable, Share!

{ 9 comments… read them below or add one }

B. Rintoul

Please try my extension that adds some pretty neat functionality to the Search Bar you mention here…

You might like it…


/* 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


Yeah… that doesnt seem to cut it for me.
Maybe its the theme I’m using? (Phoenity on 1.0PR)


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?


I’m having the same problem, and turning off my themes (so I’m just using the default theme) didn’t help.

todd sherman

simply thx
I was wanting to do that for a while.

Steve C.

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;


That still doesn’t work for me in Firefox 2, and I don’t use themes.

Bob Smith

This is a waste of time. It doesn’t work.

Leave a Comment

Previous post:

Next post: