Home Blog CV Projects Patterns Notes Book Colophon Search

Equal Height CSS Buttons and Inputs

15 Sep, 2016

This can be a bit fiddly but the trick is to use line-height and font-size to control the vertical padding, and padding left and right to control the horizontal padding. Then apply any borders etc to the outer div.

Also make sure vertical-align is middle and any outer div has display: inline-block; so that it fits to its content rather than fills the width:

<div class="search__content">
    <input type="text" name="search" placeholder="Search ..." class="search__input">
    <input type="submit" value="Go" class="search__button">
</div>

.search__input, .search__button {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    height: 36px;
    font-size: 18px;
    line-height: 36px;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
}
.search__content {
    border: 1px solid #000;
    display: inline-block;
}

See the fiddle here: https://jsfiddle.net/ebj2vp99/

Improving the styles a bit you can add this:

.search__input, .search__button  {
  outline: none;
}
.search__content {
  border-radius: 0.4em;
}
.search__input {
    border-top-left-radius: 0.4em;
    border-bottom-left-radius: 0.4em;
}
.search__button {
    border-top-right-radius: 0.4em;
    border-bottom-right-radius: 0.4em;
}

To remove the gap between the search field and the input, you have to take out the whitespace in the underlying HTML:

<div class="search__content">
    <input type="text" name="search" placeholder="Search ..." class="search__input"><input type="submit" value="Go" class="search__button">
</div>

Here's the fiddle: https://jsfiddle.net/ebj2vp99/1/