Christoph ZillgensBack to Home

I‘m an Interface Designer and Web Developer from Germany. Here are some example of my work at my one-man company

Equal height inputs and buttons

When styling a search form with CSS you maybe want to achieve equal heights of both the text input field and the submit button. But then—suprise—you’ll recognise that Firefox and Safari behave a bit different. Well, we know websites don’t need to look the same in every browser, right? Nevertheless, this problem can be annoying sometimes, but luckily there is a little CSS fix for it.

Let’s start with the following search form:

<form method="get" id="sampleform1" action="search">
	<h2><label for="s">Search</label></h2>
	<input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" class="submit" value="Search" />

(You can also use a button element instead of input for your submit button.)

The problem

Styled with some CSS (look at the example page for details) this is what you get when you add some padding to both input elements to achieve your required height:

As you can see, the submit button in Firefox is higher than the input field (IE8 behaves similar to Safari, by the way). You might think, ok let’s fix this by applying a height to both elements, but then some new problems occur:

While everythings looks fine again in Safari, the text in Firefox is no longer vertically aligned in the middle. Also, the text of the submit button is a bit too low. So, applying a height is no solution. You can also check this on the example page I created.

The solution

We have to go back and use padding again. The problem lies within the form.css of Firefox’s user agent stylesheet, where our submit button gets an additional border for :focus. By adding

input[type="submit"]::-moz-focus-inner {border:0;}

to our CSS, we get rid of this border and the height of the submit button is exactly the same as in Safari.

Because we now lost the :focus style on our button for those using a keyboard, we have to add a new style for this. Here, I simply chose a different background color:

input[type="submit"]:focus {background:#333;}

Well, that’s it.

When is this crucial?

We are just talking about a two-pixel-difference here and you can say »this is no problem for my design«.

For me it was important while styling the search form on my website and here is a similar example, I used a while back:

If you want to combine your text input field with your submit button to form a closer unit, it looks much better if your submit button has the correct height.

Another solution would be to take an image as submit button, but since we can use more and more CSS3 to create great buttons like these there is not always a need for additional images.


  1. Brandon Frohs wrote 2369 days ago · #

    Finally someone has a correct solution! First time I’ve seen someone solve this without a padding hack. Great job and thank you!

  2. Teddy Zetterlund wrote 2357 days ago · #

    I agree with Brandon here. I remember reading through all the browsers default style sheets, long ago, when I was working on a CSS forms framework. I didn’t found this solution back then. Thanks a lot for this post.

  3. Juho Makkonen wrote 2342 days ago · #

    Thanks for this! It seems to fix the problem with FF. But then I checked my test page with IE and the exact same problem I had with FF (textfield gets lowered by a pixel) seems to be there even though I added this fix. Does anyone have any idea on what might be causing this? My test page is here

  4. Christoph Zillgens wrote 2342 days ago · #

    @juho Which version of IE are you using? In IE8 it looks perfect, no problems, and older versions of IE need a separate stylesheet anyway. Have in mind that the fix described here is only for Firefox as it affects its user agent stylesheet and therefore won’t change anything in IE.

  5. geld lenen wrote 2316 days ago · #

    Wow, this a real nice solution, bookmarked! Thanks..

  6. Martin wrote 2314 days ago · #

    i’m still having problems if border isn’t set to none for both input-fields. i have a 1px solid border for both the input field and the submit button and the button’s height is 2px less…
    thank you for the article anyway!

  7. hristo wrote 2277 days ago · #

    Mate this is brilliant! Does the trick perfectly fine!

    As a suggestion, most of the time a style such as something:hover, samething:focus {} solves the problem of lacking focus feedback in a way that’s usually pleasant for keyboard wielders, as they get the same visual response from keyboard and mouse interaction.

  8. Ben Kaplan wrote 2255 days ago · #

    You rock. Thanks!

  9. Bier wrote 2094 days ago · #

    Thank you very much for yet another first-rate article. I am always searching for original WordPress tips to suggest to my readers. Thanks for creating this article. It’s exactly what I was searching for. Truly great post.

  10. Mark wrote 1978 days ago · #

    Just to say that over a year after you published this, this was still the first place I found the correct fix. Thanks for posting

  11. Minilening wrote 1808 days ago · #

    Interesting article… helped me a lot! So thanks for sharing

  12. agab wrote 1801 days ago · #

    I’m new to css and html. I am having this problem with explorer vs firefox. how do I put this code in?

  13. srhbcuqswk wrote 1733 days ago · #

    2QiVP6 <a href=“”>vjkotsdlpdjs</a>, [url=]kktoutswgdud[/url], [link=]yegniwpsvgvu[/link],

  14. shzedacb wrote 1733 days ago · #

    28GXGL <a href=“”>ctnviofhnpcp</a>, [url=]ggscqgzevbtp[/url], [link=]cyntncuaiffi[/link],

  15. ziekenhuisdieet wrote 1732 days ago · #

    Very informative article. I work a lot with Safari so this kind of information always helps. Thanks for the share.

  16. Vetverbranding stimuleren wrote 1722 days ago · #

    Thanks for sharing this useful piece of information. I recommend a Google +1 Button on your website!

  17. ziekenhuisdieet wrote 1704 days ago · #

    Thank you for this help.

    I have got some joomla sites and i might want to reedit the looks of my search form…

    Can this be implemented too?

  18. datingsites wrote 1703 days ago · #

    Soo good!! tnx for the share

  19. akbewfh wrote 1701 days ago · #

    RvrVEH <a href=“”>wfbbbichqwor</a>, [url=]rgarrtvfvxny[/url], [link=]dteixgkmjjgq[/link],

  20. phdfjisb wrote 1701 days ago · #

    Y7Oh0u <a href=“”>kbwkvvooglqf</a>, [url=]pktgswxitgnt[/url], [link=]mlcxpctcvnmr[/link],

  21. lacoste wrote 1699 days ago · #

    Firfox is number one!

  22. gsm kopen wrote 1698 days ago · #

    I love your blog!

  23. Het Koolhydraten Dieet wrote 1698 days ago · #

    I think this is one of the most important information for me. And I’m glad reading your article.
    thanks for sharing

  24. Joomla handleiding wrote 1675 days ago · #

    Great! You should add an google +1 button on your website!

  25. crqpfw wrote 1673 days ago · #

    wiPJQv <a href=“”>dyfyeeqhrcep</a>, [url=]iaqpzxwmmtmp[/url], [link=]xgivqrpeongv[/link],

  26. btashkffdc wrote 1673 days ago · #

    NluYVr <a href=“”>dicdiucrlrxb</a>, [url=]jjbtwbutiiro[/url], [link=]gktdejnupjcs[/link],

  27. Kettlebell training wrote 1651 days ago · #

    Great information! I would like to know more about this subject!

  28. Alfons wrote 1644 days ago · #

    Thank you!! :-)

  29. rubozz wrote 1626 days ago · #

    B2XbNR <a href=“”>bkiwpvnhewjm</a>, [url=]eykhqqabfurx[/url], [link=]kaymnppdcxvb[/link],

  30. eiyrveit wrote 1626 days ago · #

    zbgbKk <a href=“”>ireqxaqqwuzt</a>, [url=]oakdzvnfozmi[/url], [link=]dwvsligyjdcb[/link],

  31. Manuel Neuer wrote 1604 days ago · #

    Great article very cool to read this!

  32. osbdillb wrote 1600 days ago · #

    2bIYCr <a href=“”>vikhnzalsaou</a>, [url=]bdqmzsjpwxrr[/url], [link=]grkryhgstadw[/link],

Commenting is closed for this article.