Оформляем красиво тег SELECT при помощи CSS

Чтобы не создавать большую форму с выключателями или переключателями, иногда требуется создать выпадающее меню или прокручиваемый список. Для этих целей идеально подойдет тег <select> и вложенные в него теги option (для определения каждого варианта в элементе формы <select>). В этой статье описаны некоторые методы стилизации тега формы <select> при помощи css, а также показано, как создать и оформить стрелку внутри тега <select>.

Возможно, вам пригодится статья, где оформление тега select происходит при помощи jQuery.

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

HTML-код вышеописанного списка выбора:

HTML

<select>
<option>Первый вариант</option>
<option>Второй вариант</option>
</select>

Есть некоторые свойства, которые мы можем назначить тегу <select>, например: font (шрифт), border (граница), color (цвет), padding (отступ) и background-color (цвет фона):

Однако, как вы можете заметить, стрелка остается на прежнем месте. Стилизовать стрелку вряд ли можно, однако решение есть – и оно довольно простое.

Для начала создайте блок div и заключите в него наш список выбора (select).

HTML

<div class="styled-select">
<select>
<option>Первый вариант</option>
<option>Второй вариант</option>
</select>
</div>

Далее нам нужно добавить немного CSS, чтобы зафиксировать нужное оформление списка выбора.

CSS

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
}

Если вы установите ширину списка выбора (select) больше ширины охватывающего блока (div), стрелка исчезнет.

Затем найдите стрелку соответствующую вашему дизайну, например:

Затем охватывающему блоку назначьте стиль и в нем определите положение новой стрелки.

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
}

Наш список выбора будет выглядеть примерно (стили немного другие) так:

Зная данную методику, вы легко сделает красивый тег select, используя одно лишь CSS.