Лучшим вариантом, вероятно, будет настройка верхнего отступа и сравнение в разных браузерах. Это не идеально, но я думаю, что это так близко, как вы можете получить.
padding-top:4px;
Количество необходимых отступов будет зависеть от размера шрифта.
Совет: Если ваш шрифт установлен на px
, установите отступ также на px
. Если ваш шрифт установлен на em
, установите отступ также на em
.
EDIT
Это варианты, которые, я думаю, у вас есть, поскольку выравнивание по вертикали не одинаково во всех браузерах.
A. Удалите атрибут height и позвольте браузеру обработать его. Обычно это работает лучше всего для меня.
<style>
select{
border: 1px solid #ABADB3;
margin: 0;
padding: auto 0;
font-size:14px;
}
</style>
<select>
<option>option 1</option>
<option>number 2</option>
</select>
B. Добавьте верхний отступ, чтобы опустить текст. (Опускается вниз стрелка в некоторых браузерах)
<style>
select{
height: 28px !important;
border: 1px solid #ABADB3;
margin: 0;
padding: 4px 0 0 0;
font-size:14px;
}
</style>
<select>
<option>option 1</option>
<option>number 2</option>
</select>
C. Вы можете увеличить шрифт, чтобы он соответствовал выбранной высоте немного лучше.
<style>
select{
height: 28px !important;
border: 1px solid #ABADB3;
margin: 0;
padding: 0 0 0 0;
font-size:17px;
}
</style>
<select>
<option>option 1</option>
<option>number 2</option>
</select>