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

Question

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

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

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

Answer 1

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

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

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

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

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

Вот jsFiddle из ниже: http://jsfiddle.net/URgCB/4/

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

HTML:

<select> 
    <option>Here's one option</option> 
    <option>here's 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; 
    }  
} 

Answer 2

Вы можете также «центр» текст с:

vertical-align: middle;