Почему у select и input разная высота и как это исправить?

#html #css #вёрстка

Здесь два вопроса, но из первого вытекает второй.

Почему у select и input разная высота?



* {
  box-sizing: border-box;
}

select,
input[type="text"] {
  padding: 2px;
  border: 1px solid #ccc;
  font-size: 13px;
}

One
Two
Three







И как это исправить чтобы это было гибко?

Нюансы

Пытаюсь установить для select и input одинаковую высоту, но очень хочется это сделать
гибко, а это значит, что не хочу просто установить фиксированную высоту. Чтобы я менял
без проблем font-size без необходимости менять высоту. И я не совсем понимаю почему
у них получается разная высота ввиду того, что у них одинаковый размер шрифта и одинаковые
padding, border и box-sizing.

Ещё понимаю, что можно подобрать разные padding для input и select, но хочется понять
механику и причины данных результатов, а также решить их "без хаков".

Из браузеров больше всего любопытен Chrome, но кроссбраузерное решение будет вообще
идеальным.
    

Ответы

Ответ 1

Это не во всех браузерах. Разная высота- это одна из особенностей стилизации определённого
браузера.

Что бы select имел такую же высоту, нужно убрать у него стрелку справа. Но тут нюанс:
если мы добавим стрелку текстовому полю, то оно высоту не изменит. так что утверждать
на 100%, что это из за стрелки нельзя, но это одно из решений.

Для данного случая можно применить 3 варианта решения:

Вариант 1:

Добавление фоновой картинки вместо стандартной стрелки



* {
  box-sizing: border-box;
}

select,
input[type="text"] {
  width: auto;
  padding: 2px;
  border: 1px solid #ccc;
  font-size: 13px;
  -webkit-appearance: none;
}
select {
    padding-right: 10px;
    background-image: url(http://s1.iconbird.com/ico/2013/8/426/w32h321377581133134TriangleDown.png);
    background-size: 16%;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: calc(100% - 5px);
}

  One
  Two
  Three







Вариант 2:

Обрамление select'а в div и добавление псевдокласса :after

За основу взят ответ со eng stackoverflow: css-change-dropdown-arrow-to-unicode-triangle



* {
  box-sizing: border-box;
}

select,
input[type="text"] {
  padding: 2px;
  border: 1px solid #ccc;
  font-size: 13px;
  -webkit-appearance: none;
}
select {padding-right: 10px;}
.select {display: inline-block; position: relative;}
.select:after {
    display: block;
    position: absolute;
    right: 5px;
    content: '▼';
    font-size: 0.6rem;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
}

  
    One
    Two
    Three
  







Вариант 3:

Это вариант схожий с Вариантом 2, но здесь мы вместо :after используем svg



* {
  box-sizing: border-box;
}

select,
input[type="text"] {
  padding: 2px;
  border: 1px solid #ccc;
  font-size: 13px;
  -webkit-appearance: none;
}
select {padding-right: 10px;}
.select {display: inline-block; position: relative;}
.select svg {
    display: block;
    position: absolute;
    right: 5px;
    width:20px;height:20px;
    font-size: 0.6rem;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
}

  
    One
    Two
    Three
  
  







Данные способы также решат проблему того, что select отрисовывается по разному в
разных браузерах и ОС.


Ответ 2

Если присмотреться, то в стандартных стилях у инпута для бордера есть значения border-style:
inset и border-width: 2px. Потому, меняя значение ширины инпуту на 1 пиксель мы вмешиваемся
в размер его коробки. Чтобы этого избежать, можно сделать границу однопиксельной и
прозрачной, а её вид для инпута сымитировать при помощи box-shadow.



* {
  box-sizing: border-box;
}

select,
input[type="text"] {
  padding: 2px;
  font-size: 13px;
  border: 1px solid #ccc;
}

input[type="text"] {
  border-color: transparent;
  box-shadow: 0px 0px 0 1px #ccc;
}

One
Two
Three





Ответ 3

Попробуй вот так

select, input[type="text"] {
   padding: 2px;
   border: 1px solid #ccc;
   font-size: 13px;
   min-height: 23px;
}