Проблема с высотой ввода и выбора тега в форме

Я делаю форму. Когда я назначаю одинаковую высоту и ширину тегам <input> и <select> тег <select> не принимает ту же высоту, что и <input>.

Кажется, разница в высоте составляет один пиксель.
В чем проблема?

input {
  width: 100px;
  height: 20px;
  vertical-align: top;
}

select {
  border: 1px solid #ccc;
  vertical-align: top;
}

option {
  color: red;
  width: 100px;
  height: 20px;
  text-decoration: underline;
}
<input type="text">
<select>
  <option>first option</option>
  <option>second option</option>
</select>

Ответы

Ответ 1

Вы должны указать высоту в свой select и дать для этого свойство box-sizing.

select {
    border:1px solid #ccc;
    vertical-align:top;
    height:20px;
}
input, select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Отметьте http://jsfiddle.net/RCnQa/16/

Работает на IE8 и выше.

Ответ 2

попробуйте использовать box-sizing:

input, select, option {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  
}
input, select {
    width:100px;
    height:20px;
    border : 1px #ccc solid;
    vertical-align:top;
}

Пример скрипта: http://jsfiddle.net/RCnQa/17/

Ответ 3

они никогда не будут одинаковыми визуально, вы можете обновить select css, используя ниже:

select {
    border:1px solid #cccccc;
    vertical-align:top;
    height:23px;
}

Ответ 4

У меня была такая же проблема с полем выбора в одном из моих проектов. Я исправил это, изменив стрелку окна выбора, как указано здесь,

http://bavotasan.com/2011/style-select-box-using-only-css/

Надеюсь, это поможет.....

Ответ 5

Даже в последнем Chrome с 11/21/17 по-прежнему представляется необходимым установить фиксированную высоту для выбора.

Я предпочитаю устанавливать min-height, потому что мне это нравится, плюс есть всевозможные плагины, которые могут испортить размер шрифта, который вы не можете учитывать. Это немного безопаснее, чтобы избежать обрезки.

 padding: .25rem .5rem;
 min-height: 2.5rem;
 font-size: 1.1em;

Примечание. Можно уменьшить вертикальное заполнение, так как теперь мы вынуждаем высоту.

Используйте ems для padding и min-height, если вы хотите, чтобы высота изменялась при изменении размера шрифта.

Ответ 6

Просто используйте класс управления формой в select, если вы используете bootstrap.

<select class="form-control">