Bootstrap: Select doesn't have the same height as input

[natcohen]

If you create a select and an input next to each other, you will see that the select is bigger than the input... they should have the same height!

https://jsfiddle.net/zk6akjL1/2/

[jipexu]

yes this is from long time ... if you use custom-select class it's ok ..
oups i didnt see your example ... so it's input group and not input ?.. isn't it

[natcohen]

@jipexu if you think I made a mistake, please provide a working example by modifying my fiddle...

[jipexu]

you right i have 35 and 38 px ... so it's come with alpha 04

[cvrebert]

@natcohen Using .custom-select and .form-control on the same element, like in your example, is invalid.

[mihaistoie]

source of bug : _forms.scss line 59

select.form-control {
  &:not([size]):not([multiple]) {
    height: $input-height;  //<-- 2.5 rem
  }
// ...

A solution that works on IE/Firefox/Chrome

select.form-control {
  &:not([size]):not([multiple]) {
    //simulate line-height: 1.25  for selects
    box-sizing: content-box;
    height: 1.25rem;  
  }
// ...

[natcohen]

@cvrebert Try without the .custome-select and you'll get the same problem...

[twbs-lmvtfy]

Hi @natcohen!

You appear to have posted a live example (https://fiddle.jshell.net/shjmpvje/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 75, column 5 thru column 74: No space between attributes.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[mihaistoie]

@cvrebert && @natcohen :

• for selects height is 2.5 rem * 16 = 40px
• for inputs height is line-height + padding + border = 1.25 rem + 1rem + 2px = 38px

<form class="form-inline">
  <div class="form-group">
    <select id="select" class="form-control">
        <option>test</option>
    </select>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="input" placeholder="Input">
  </div>
</form>

https://jsbin.com/mipida/2/edit?html,output

[mdo]

Dupe of #20874, since fixed in v4-dev.

[sharathdaniel]

This issue still exists with latest version. The same happens with input type file.