Записки HTML-верстальщика: Стилизуем стрелочку Select - быстро, кросс-браузерно, красиво

Здрасте всем еще раз! 

В этом посте я хочу рассказать какую технику стилизации стандартной стрелочки в элементе SELECT использую я в своей практике.

 Проблема:  очень часто современный дизайн требует очень тщательно относиться ко всем мелочам, вплоть до стилизации "нестилизуемых" с первого взгляда элементов. К примеру, чтобы стилизовать стрелочку в элементе SELECT, необходимо знать несколько хаков, которые помогут это быстро сделать.

По умолчанию стрелочка стандартного селекта выглядит в разных браузерах по-разному:

Chrome: 

Firefox:

IE11-IE8:

 Решение: для того, чтобы нашу стрелочку как-то преобразовать, не используя JS и дополнительные html-теги (да, есть способ, когда select оборачивается дополнительным дивом и далее проводятся некоторые манипуляции - об этом способе я расскажу в следующей записи. Подписывайтесь, чтобы быть в курсе событий), необходимо знать некоторые специфические CSS-правила.

• -webkit-appearance:none; - скрывает стандартную стрелку в старых версиях chrome, некоторых браузерах на мобильных устройствах и других webkit-браузерах
• -o-appearance:none; - скрывает стандартную стрелку в старых версиях браузера opera
• -moz-appearance:none; - скрывает стрелку в firefox
• select::ms-expand {display:none;} - скрывает стрелку в EDGE, IE11, IE10 (ВНИМАНИЕ! - это свойство нужно писать отдельно от других, иначе оно не сработает).

В результате этих манипуляций, мы скроем все стандартные стрелки селектов во всех популярных браузерах, за исключением древних IE9 и более ранних его версий. Добавив какую-нибудь картинку стрелку в качестве фона, мы решим нашу проблему:

Chrome:

Firefox:

 IE Edge, IE11, IE10:

Для IE9- необходимо убрать отступ справа, иначе там у нас будет видно две стрелки вместе. Этот баг нам поможет исправить код, который нужно добавить в head нашего html файла:

<!--[if lt IE 10]>

<style>

select {padding-right:0 !important;}

</style>

<![endif]-->

Теперь наш SELECT стилизован, Вы можете использовать этот метод как одно из оружий в вашей борьбе со стилизацией стрелочек селекта! 

Буду раз ответить всем на Ваши вопросы, буду рад видеть всех и каждого у себя в подписчиках, буду рад увидеть Ваше решение этой проблемы. Спасибо за внимание :)