Здесь два вопроса, но из первого вытекает второй.
Почему у select и input разная высота?
* {
box-sizing: border-box;
}
select,
input[type="text"] {
padding: 2px;
border: 1px solid #ccc;
font-size: 13px;
}
И как это исправить чтобы это было гибко?
Нюансы
Пытаюсь установить для select и input одинаковую высоту, но очень хочется это сделать гибко, а это значит, что не хочу просто установить фиксированную высоту. Чтобы я менял без проблем font-size без необходимости менять высоту. И я не совсем понимаю почему у них получается разная высота ввиду того, что у них одинаковый размер шрифта и одинаковые padding, border и box-sizing
Ещё понимаю, что можно подобрать разные padding для input и select, но хочется понять механику и причины данных результатов, а также решить их "без хаков".
Из браузеров больше всего любопытен Chrome, но кроссбраузерное решение будет вообще идеальным.
Ответ
Это не во всех браузерах. Разная высота- это одна из особенностей стилизации определённого браузера.
Что бы 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);
}
Вариант 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%);
}
Вариант 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%); }
Данные способы также решат проблему того, что select отрисовывается по разному в разных браузерах и ОС.
Комментариев нет:
Отправить комментарий