Чтобы задать цвет, фоновое изображение, размеры для элемента форм <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 должна существовать!

 

Добавить комментарий


Защитный код
Обновить