Подтвердить что ты не робот

<select> HTML-элемент с высотой

Кто-нибудь знает способ стилирования элемента выбора HTML, чтобы он имел определенную высоту и хорошо смотрелся в браузерах? Я пробовал просто устанавливать высоту в CSS, но текст внутри поля вертикально неактивен в Firefox.

<select style="height:1.8em;">

Это не дублирующий вопрос. Другой вопрос спрашивает о высоте раскрывающегося списка, которое появляется, когда вы нажимаете на элемент select. Мой вопрос касается высоты элемента unclicked select.

Ответ 1

Я использовал несколько хакеров CSS и специально настроил Chrome/Safari/Firefox/IE, так как каждый браузер отображает несколько разных вариантов. Я тестировал все браузеры, кроме IE.

Для Safari/Chrome установите height и line-height для своего <select />.

Для Firefox, мы собираемся убить Firefox по умолчанию padding и border, а затем установить наши собственные. Установите прописную букву на все, что вам нравится.

Для IE 8 +, как и в Chrome, мы установили свойства height и line-height. Эти два media queries могут быть объединены. Но я сохранил его отдельно для демонстрационных целей. Итак, вы можете видеть, что я делаю.

Обратите внимание на, для свойства height/line-height для работы в OSX Chrome/Safari вы должны установить background на пользовательское значение. Я изменил цвет в моем примере.

Здесь jsFiddle из ниже: http://jsfiddle.net/URgCB/4/

Для маршрута без хака, почему бы не использовать настраиваемый подключаемый модуль через jQuery? Проверьте это: http://codepen.io/wallaceerick/pen/ctsCz

HTML:

<select>
    <option>Here one option</option>
    <option>here another option</option>
</select>

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {  /*safari and chrome*/
    select {
        height:30px;
        line-height:30px;
        background:#f4f4f4;
    } 
}
select::-moz-focus-inner { /*Remove button padding in FF*/ 
    border: 0;
    padding: 0;
}
@-moz-document url-prefix() { /* targets Firefox only */
    select {
        padding: 15px 0!important;
    }
}        
@media screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */        
    select {
        height:30px;
        line-height:30px;
    }     
}

Ответ 2

Вы также можете "центрировать" текст с помощью:

vertical-align: middle;