Делаем стильный тег Select Box с помощью CSS

Мне часто приходится использовать Select Box ( select) при создании формы с наличием выпадающего списка. Мне потребовалось время, чтобы выяснить, как легко и просто можно задать стиль Select Box-а с использованием лишь CSS, поскольку некоторые части зависят от браузера, например, выпадание вниз и не редактируются стандартным набором стилей.

Так выглядит Select Box по умолчанию:

<select>
     <option>Выбор из выпадающего списка</option>
     <option>Второй выбор из выпадающего списка</option>
</select>

В Select-Box-е есть определённые параметры, с помощью которых Вы можете сделать стилизацию select и которые можно настраивать, например, цвет шрифта, границы, цвет, отступы и фон:

Но раздражающая стрелка выпадающего списка всегда остаётся одной и той же. Не существует прямого способа изменить её стиль, но обходной путь довольно прост.
Сначала нам нужно окружить наш Select Box div-контейнером:

<div class="new-select-style-wpandyou">
<select>
     <option>Выбор из выпадающего списка</option>
     <option>Второй выбор из выпадающего списка</option>
</select>
</div>

Далее нужно добавить немного CSS, чтобы убедиться, что элементы Select Box-а оформлены определённым образом:

.new-select-style-wpandyou select {
    border-radius: 0;
    background: transparent;
    height: 34px;
    padding: 5px;
    border: 0;
    font-size: 16px;
    line-height: 1;
    -webkit-appearance: none;
    width: 268px;
   }

Необходимо убедиться, что Select Box занимает больше места, чем окружающий его div, так, что стрелка по умолчанию исчезает.

Вот новая стрелка, которую я хочу использовать:
down_arrow_select

Наш div-контейнер должен быть настроен таким образом, чтобы новая стрелка появлялась там, где мы хотим:

.new-select-style-wpandyou {
    border: 1px solid #CCC;
    overflow: hidden; 
    height: 34px;
    background: url(../wp-content/uploads/2013/01/down_arrow_select.jpg) no-repeat right #DDD;
    width: 240px;
   }

Теперь наш красивый Select Box выглядит так:

Дизайн стрелки можно скачать в интернете или сделать в фотошопе. Зная этот небольшой обходной путь, вы сможете намного легче задавать стиль Select Box-а в точности так, как вы хотите, чтобы он выглядел, с использованием одного лишь CSS.

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