Equal height input and submit button

The following problem is as old as CSS, or at least I like to think so.

Imagine you have a search input field and next to that is a submit button. Now you want them both to be of equal height without setting a fixed height because we try to be as flexible and responsive as possible.

You may add some padding and maybe a border to the input field but not to the button and all of the sudden the display across browsers isn't consistent. There are a couple of things to take into account here.

In the following example I set both elements to inline-block so they align side by side nicely. If you need more control over the gap between them, you can also float both and push the button aside with some margin.

It's good to apply the exact same things to both the input field and the submit button. padding, font-family, font-size, you name it.

Second, an <input type="submit"> button has a border by default. If you don't want one, you can set it to 0, but that will cause a not equal height of both elements. So you should rather add a transparent border. That way the height will be the same but you don't have to set the color a second time.

<form>
    <input class="input" type="text" placeholder="Search for...">
    <input class="submit" type="submit" value="Submit">
</form>

.input,
.submit {
    display: inline-block;
    padding: 10px 15px;
    font-size: 20px;
    border-radius: 0;
    -webkit-appearance: none;
}

.input {
    border: 1px solid lightgray;
}

.submit {
    background-color: lightgreen;
    /**
     * If the input field has a border,
     * you need it here too to achieve equal heights.
     */
    border: 1px solid transparent;
}

So far the display will be pretty consistent between browsers, except Firefox makes the button taller than it should be. There is a little trick to prevent this from happening.

/**
 * Firefox Fix
 * Without that the submit button will be too high.
 */
.submit::-moz-focus-inner { 
    border: 0;
}

There is a pseudo element in Firefox called focus-inner. I've never used it and I truely have no idea why it's there, but you can set the border of it to 0 and your problem is gone. If that isn't enough, try setting padding and/or margin of it to 0 as well.

Safari does a few things to inputs by default as well which you may or may not like but can definitely screw you if you want a consistent look. That's especially the case when using a special input like <input type="search">.

There is a -webkit prefixed CSS property called appearance which you can set to none to bring the design back to normal. You also need to set the border-radius to 0, too.

-webkit-appearance: none;
border-radius: 0;

This will make sure the input looks barebones and doesn't get any Safari specific styling. Sometimes this can be useful, tho.

That's all you have to do to achieve an equal height input and submit button module.

See the Pen Equal height input and submit button by Martin Wolf (@martinwolf) on CodePen.