Как сделать с помощью CSS одинаковый вид у выпадающего списка в Firefox и Chrome?

Question

[Руслан Левиев]

Есть HTML-разметка:

<select>
	<option value="1">Выпадающий дропбокс</option>
</select>

CSS:

select {
	height: 30px;
	line-height: 30px;
}

В Хроме это выглядит идеально:


В Файерфоксе же выглядит криво:


Как используя желательно только CSS, причём по минимуму (и не делая при этом элемент select прозрачным и размещая поверх него другой элемент), привести вид в Файерфоксе к виду, идентичному в Хром?

Всякие padding-top не помогают, ибо кнопка выпадающего списка отрывается от границы элемента:

Answer 1

[m0dE]

http://jsfiddle.net/rJ5Nm/1/
Используйте padding, например
Я с Ubuntu.
В Chrome:

В Firefox:

Answer 2

[Артур Бойко]

попробуй

-moz-appearance: menulist;
-webkit-appearance: menulist;
appearance: menulist;

Comments

[Руслан Левиев]

Не помогло http://i.imgur.com/aPc15FN.png

Answer 3

[Иван Желудков]

Ты бы давал ссылку на http://jsfiddle.net/ или http://codepen.io, а то неудобно помогать. Так бы я щас зашёл, 5 минут пошаманил и скинул бы готовый вариант скорей всего, если получилось бы, но нужно ещё учитывать, что я тут не один.

Answer 4

[Kirill Popolov]

Насколько я знаю - нельзя так сделать (по крайней мере пока что). Предлагаю воспользоваться uniformjs или написать что-то подобное самому.

Answer 5

[daer]

Юзаю что-то типа этого http://jsfiddle.net/daer/5xvLD/3/

Answer 6

[Anton Essential]

Используйте падинг , либо http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

<select>
    <option value="1">Выпадающий дропбокс</option>
</select>

select {
    padding: 5px;
}