Разное отображение в браузерах элемента <select>

[volshebnyi]

Здравствуйте!

Стилизовал элемент select, но, к сожалению, в Firefox практически вдвое увеличивается padiing, а в IE даже дефолтные стрелки выпадающего списка не убираются:

https://jsfiddle.net/hhbsorny/3/

Помогите, пожалуйста, разобраться в этом вопросе.

Заранее благодарю!

 

Edited November 1, 2016 by volshebnyi

[Switch74]

Мне кажется лучше делать полностью свой выпадающий список на основе input, тогда можно будет его стилизовать под все браузеры и добавить дополнительный функционал

на крайний случай в инете много готовых решений

[volshebnyi]

1 час назад, Switch74 сказал:

Мне кажется лучше делать полностью свой выпадающий список на основе input, тогда можно будет его стилизовать под все браузеры и добавить дополнительный функционал

на крайний случай в инете много готовых решений

Подскажите, о каких готовых решениях речь?

[Switch74]

например банальный http://dimox.name/jquery-form-styler/

[volshebnyi]

2 часа назад, Switch74 сказал:

например банальный http://dimox.name/jquery-form-styler/

Это я видел. Я пытаюсь сделать только средствами CSS. В крайнем случае - нативный JavaScript. Без плагинов...

[Switch74]

Ну так делайте нативный без плагинов тогда, за основу берите идею данного плагина.

На чистом css мне кажется выпадающий список будет не тот, но подзапариться можно конечно через radio или checkbox. 

[volshebnyi]

13 часа назад, Switch74 сказал:

Ну так делайте нативный без плагинов тогда, за основу берите идею данного плагина.

На чистом css мне кажется выпадающий список будет не тот, но подзапариться можно конечно через radio или checkbox. 

Проблему с отступами в Firefox решил с помощью line-height. Остался один "нюанс" - line-height для select почему-то не работает в IE..