Ответ 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;
}
}