Чтобы задать цвет, фоновое изображение, размеры для элемента форм <select> существует масса мануалов основанных на использовании JS, а то и библиотек скриптов типа JQuery. Что очень усложняет последующую их кастомизацию и внедрение в сайт в соответствии с заданным дизайном.
Предлагаемый вариант позволяет легко и быстро задать фон, бордер, размер, а главное, вид стрелки для выпадающего списка <select>. Только CSS!
Итак? добавляем в CSS следующий код:
select {
width: 200px;
height: 26px;
border-radius: 3px;
-webkit-appearance: none;
background:#fff url('../images/arrow-down-select.png') no-repeat 96% center;
line-height: 1em;
/* for FF */
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
/* for IE */
-ms-appearance: none;
appearance: none!important;
}select::-ms-expand {
display: none;
}
Картинка arrow-down-select.png заменяет стандартную браузерную стрелку в тэге select
Теперь любой выпадающий список на сайте будет кастомизирован в соответствии с приведенным вышее кодом. Ну и, конечно, самим можно задавать цвет, размер и пр. Не забываете - картинка arrow-down-select.png должна существовать!
