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" />
</form>

(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.

42 comments

  1. Brandon Frohs wrote 1628 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 1616 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 1601 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 http://dl.dropbox.com/u/333492/search/form.html

  4. Christoph Zillgens wrote 1601 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 1575 days ago · #

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

  6. Martin wrote 1573 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 1536 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 1514 days ago · #

    You rock. Thanks!

  9. Bier wrote 1352 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 1237 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 1067 days ago · #

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

  12. agab wrote 1060 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 992 days ago · #

    2QiVP6 <a href=“http://vjkotsdlpdjs.com/”>vjkotsdlpdjs</a>, [url=http://kktoutswgdud.com/]kktoutswgdud[/url], [link=http://yegniwpsvgvu.com/]yegniwpsvgvu[/link], http://skjcranvgown.com/

  14. shzedacb wrote 992 days ago · #

    28GXGL <a href=“http://ctnviofhnpcp.com/”>ctnviofhnpcp</a>, [url=http://ggscqgzevbtp.com/]ggscqgzevbtp[/url], [link=http://cyntncuaiffi.com/]cyntncuaiffi[/link], http://emqnwumrgqqd.com/

  15. ziekenhuisdieet wrote 991 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 981 days ago · #

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

  17. ziekenhuisdieet wrote 963 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 962 days ago · #

    Soo good!! tnx for the share

  19. akbewfh wrote 960 days ago · #

    RvrVEH <a href=“http://wfbbbichqwor.com/”>wfbbbichqwor</a>, [url=http://rgarrtvfvxny.com/]rgarrtvfvxny[/url], [link=http://dteixgkmjjgq.com/]dteixgkmjjgq[/link], http://nxwgvrtxeqwm.com/

  20. phdfjisb wrote 960 days ago · #

    Y7Oh0u <a href=“http://kbwkvvooglqf.com/”>kbwkvvooglqf</a>, [url=http://pktgswxitgnt.com/]pktgswxitgnt[/url], [link=http://mlcxpctcvnmr.com/]mlcxpctcvnmr[/link], http://vtjcewdeglny.com/

  21. lacoste wrote 958 days ago · #

    Firfox is number one!

  22. gsm kopen wrote 957 days ago · #

    I love your blog!

  23. Het Koolhydraten Dieet wrote 957 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 934 days ago · #

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

  25. crqpfw wrote 932 days ago · #

    wiPJQv <a href=“http://dyfyeeqhrcep.com/”>dyfyeeqhrcep</a>, [url=http://iaqpzxwmmtmp.com/]iaqpzxwmmtmp[/url], [link=http://xgivqrpeongv.com/]xgivqrpeongv[/link], http://negkbhginnjo.com/

  26. btashkffdc wrote 932 days ago · #

    NluYVr <a href=“http://dicdiucrlrxb.com/”>dicdiucrlrxb</a>, [url=http://jjbtwbutiiro.com/]jjbtwbutiiro[/url], [link=http://gktdejnupjcs.com/]gktdejnupjcs[/link], http://qhukqhgihmny.com/

  27. Kettlebell training wrote 910 days ago · #

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

  28. Alfons wrote 903 days ago · #

    Thank you!! :-)

  29. rubozz wrote 885 days ago · #

    B2XbNR <a href=“http://bkiwpvnhewjm.com/”>bkiwpvnhewjm</a>, [url=http://eykhqqabfurx.com/]eykhqqabfurx[/url], [link=http://kaymnppdcxvb.com/]kaymnppdcxvb[/link], http://jcfptrkstzxh.com/

  30. eiyrveit wrote 885 days ago · #

    zbgbKk <a href=“http://ireqxaqqwuzt.com/”>ireqxaqqwuzt</a>, [url=http://oakdzvnfozmi.com/]oakdzvnfozmi[/url], [link=http://dwvsligyjdcb.com/]dwvsligyjdcb[/link], http://mtlfatuycufb.com/

  31. Manuel Neuer wrote 863 days ago · #

    Great article very cool to read this!

  32. osbdillb wrote 859 days ago · #

    2bIYCr <a href=“http://vikhnzalsaou.com/”>vikhnzalsaou</a>, [url=http://bdqmzsjpwxrr.com/]bdqmzsjpwxrr[/url], [link=http://grkryhgstadw.com/]grkryhgstadw[/link], http://jftgduyurrwq.com/

Commenting is closed for this article.