Открыть меню    

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

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

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

красивый список выбора на CSS

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

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), стрелка исчезнет.

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

стрелка для элемента формы select

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

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

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

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

Комментарии к статье

аватарка пользователя
2012-01-09
Очень помогли!

Спасибо большое! Точно - все гениальное просто))) столько вариантов предлагают но в моем случае это не применишь))) ползет дизайн. Вы очень помоги.

аватарка пользователя
2012-01-16
Caminante

Классный способ, но есть недостаток - в IE после закрытия списка он перекрывается серой полосой.

аватарка пользователя
2012-03-02
jurik1984

Есть еще косячок. При выпадении options-ы выглядят шире псведо-селекта. Тут стоило бы сделать два вложенных div - одним обрезать select а другой выдать по ширине select-a

аватарка пользователя
2012-03-21
Игорь

Посмотрите свой пример в IE-7 :) Не работает ведь, потому что IE имеет не прозрачный фон а белый по умолчанию!!

аватарка пользователя
2012-03-23
stsvol

кроссбраузерности 0 сам юзаю скрипт cuSel

аватарка пользователя
2012-06-20
Серёжа

Большое спасибо, очень полезная информация, спасибо!

аватарка пользователя
2012-06-27
Стас

Спасибо за совет!

аватарка пользователя
2012-07-02
Евгений

Хром - казлит! стрелки в бекгарунте не видно из-за селекта, а в других браузерах вроде нормально

аватарка пользователя
2012-08-15
Youonru

Максимум Армор!

аватарка пользователя
2012-11-06
AskilD

very nice!!!

аватарка пользователя
2012-11-27
Марат

можно ли сделать чтоб выпадающий список открывался вверх??

аватарка пользователя
2012-12-02
Егор12

Здравствуйте, подскажите пожалуйста, как это происходит, что хром не поддерживает прозрачность?, данную форму отчётливо вижу посредством хрома работоспособной здесь, но этот же код размещённый на странице моего сайта никак не отображает эту форму полноценно в этом же хроме, селектор перекрывает обёртку diva., хотя в лисе и IE отображается правильно, правда в IE форма не круглая, но зелёная и с кнопкой png, как и положено.., ничего не пойму(.

аватарка пользователя
2012-12-21
Darkling

Так же не пойму почему здесь нормально, а на рабочем проекте хром не показывает прозрачность

аватарка пользователя
2012-12-21
Darkling

Понятноrn-webkit-appearance: none;rnrnнадо такое сразу указывать

аватарка пользователя
2013-02-08
dnzl

пожалуйста
Источник

аватарка пользователя
2013-02-14
Рыжая

Ага, -webkit-appearance: none; и прозрачность лучше через rgba, а то Опера ругается (по крайней мере, 12)

аватарка пользователя
2013-09-20
Рыжый

А option можно сделать покороче?

аватарка пользователя
2013-10-29
Оксана

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

аватарка пользователя
2013-10-29
dnzl

Оксана, лучший вариант, для стилизации SELECT использовать jquery, например, есть отличный плагин styler

аватарка пользователя
2014-02-03
Max

а как убрать родную стрелку?

аватарка пользователя
2014-02-03
dnzl

никак, используйте jquery

аватарка пользователя
2014-06-16
George

Super!

аватарка пользователя
2014-07-09
Алексей

Халтура, а не код, работает только в хроме!

аватарка пользователя
2017-02-21
Alex

убрать стрелку

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

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