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.)
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.
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
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:
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.
Commenting is closed for this article.