CSS - Exact same height and alignment of button and input text box

user_848984 0
Viewed 89983

I need to have a button and a tex box sitting next to each other and they have to align up perfectly as if one is bigger than the other then it will be instantly noticeable.

Usually I wouldnt bother about small differences between browsers, but these two input are sitting in a very prominent position on every page and are a big feature of the site so they have to align perfectly in all major browsers and zoom levels.

Does anyone have any advice on how to achieve this.

Just as a quick example of what i am trying to achieve: the new google homepage. After starting to type the autocomplete kicks in and the search box is moved to the top with a blue button perfectly aligned to the text box. It works perfectly cross browser but its marked up in a table. Does that suggest that this may be the best way of achieving this?

cross-browser forms css
13 Answers

In 2019 you want to be using CSS Grid for your forms even if they just have one input and one button.

This saves a lot of pain.

I have lots going on with my working example so I will not post a working example here. Instead, here are the things you need to know.

The outer container can be the form, CSS for this being display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

The input should have a label which I will assume is set to be hidden. So the CSS for the input has grid-column: 1; height: 100%; the button has grid-column: 2; height: 100%

You are going to do your own things with margins, backgrounds, paddings, borders, border radius and such like.

The crucial thing of getting the button to line up with the input is done with the grid row having a fixed height in ems or another sensible responsive friendly unit and the input and button being set to a height of 100%.

I did not find any of the above answers to result in as succinct and manageable code as the CSS Grid option which works for me on Firefox, Chrome and a Webkit based browser.

Note that if using CSS Grid then you need precisely zero div elements in your form, however, if using fieldsets you may need to set them to display: content as CSS Grid does not work with fieldset.

user_39176020

Your other option is to use Bootstrap. I solve this issue by assigning class "input-group" to the div that wraps the input and the button/s.

user_54249840

Anyone who's trying to do it now I found that this solution seems to work. Try adding :

  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;

to your current css on both elements which will still leave them slightly misaligned, and then play around with the top padding in the misaligned element. I found that :

padding-top: 2px;

worked for me.

user_96691240

This is an example of a vertically aligned input + button combo, with no margin between elements (thanks to font-size:0px), and where the input field does not increase in vertical height when selected; here font-size controls vertical height, whereas line-height would cause vertical misalignment.

html

<div class="emailbuttonparent">
<input type="email" class="emailaddr" placeholder="email" />
<input type="button" value="Get Started" />
</div>

css

.emailbuttonparent {
    font-size: 0;
}

select, input, button {
    display:inline-block;
    border-width: 0px;
    font-size: 25px;
}


    input[type="email"]:focus {
        background-color: #f1f1f1;
        color: #fff;
        outline: 0;
    }
patrick_738040
Related