Css select красивый: Оформляем Select CSS! Пользовательские стили для Select на CSS

Содержание

Оформляем Select CSS! Пользовательские стили для Select на CSS

С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Смотреть примерСкачать

Вот как выглядит этот Select оформленный на CSS:

Похожие статьи на эту тему:

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

1 шаг. Подключаем необходимые файлы

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head></head>:

HTML КОД

1 2	<link rel="stylesheet" type="text/css" href="css/style.css" /> <script type='text/javascript' src='js/select.js'></script>

2 шаг. HTML структура элемента Select

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:

HTML КОД

<form action="#">
    <p>
        <label>Страны Великобритании:</label>
        <select>
            <option>Пожалуйста, выберите страну:</option>
            <option>Англия</option>
            <option>Северная Ирландия</option>
            <option>Шотландия</option>
            <option>Уэльс</option>
        </select>
    </p>
</form>

3 шаг. Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

CSS КОД

.dropcontainer {
   position:relative;
   font-size: 16px;
   color: #777;
} 
 
.trigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.trigger:hover {
   color: #777;
   background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
 
.activetrigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.activetrigger:hover {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.activetrigger:active {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.dropcontainer ul {
   font-size: 16px;
   border: 1px solid #ccc;
   border-top: none;
   background: #fff;
   list-style-type: none;
   padding: 10px;
   margin: 0;
   width: 50%;
   z-index: 100;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.dropcontainer ul li {
   padding: 5px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease; 
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.dropcontainer ul li:hover {
   background: #f5f5f5;
   outline: none;
}
 
.dropcontainer ul li:first-child {
   display: none;
}
 
.dropcontainer ul li:last-child {
   border-bottom: none;
}
 
.dropdownhidden {
   display: none;
}
 
.dropdownvisible {
   height: auto;
}

В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.

Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

Вам нужно заменить последнее свойство dropdownvisible:

CSS КОД

1
2
3

.dropdownvisible {
    height: auto;
}

На это:

CSS КОД

.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
}

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

✓ Firefox 24.0, Firefox 25.0, Firefox 26.0

✓ Chrome 29.0, Chrome 30.0, Chrome 31.0

✓ Opera 12.14, Opera 12.15, Opera 12.16

✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0

✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0

✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini

✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

1 шаг. Подключаем необходимые файлы

2 шаг. HTML структура элемент Select

3 шаг. Добавляем стили для Select CSS

В каких браузерах этот Select CSS

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

CSS оформление select — используем свойство appearance

Очень часто дизайнеры рисуют макеты с нестандартными элементами форм, т.е. оформление чекбоксов, радиокнопок, инпутов и селектов отличается от того, что рендерит браузер по умолчанию. Таким образом, перед верстальщиком возникает задача кастомизировать оформление, в том числе это касается элементов select.

В статье мы рассмотрим, как изменить внешний вид select-ов. Однако мы будем придерживаться следующей идеологии. Кастомизировать имеет смысла только дефолтное свёрнутое состояние селекта, а оформление выпадающего списка должно оставаться стандартным. Поэтому решение, описанное ниже, не подойдет, если вам требуется сложный выпадающий список, например, с иконками или чекбоксами для каждого option.

С другой стороны такой подход позволяет:

1. Не писать javascript код, который эмулировал бы поведение селектов. Вся логика возлагается на браузер. Плагинов на сегодняшний день очень много, но не часто встретишь такой, который обрабатывал бы все крайние случаи, возникающие у пользователя при взаимодействии с этим контролом. Примером такого крайнего случая может служить автоматический выбор положения выпадающего списка (открытие вниз или вверх).

2. Раз за поведение и оформление выпадающего списка отвечает браузер, то и не требуется писать какое-то отдельное решение для мобильных устройств, которое позволяло бы удобно работать с селектами на тач-устройствах с маленькими экранами. Встроенные нативные селекты сами принимают нужный вид, ведь на мобильных платформах уже всё продумано. Например, пользователи iOS при клике по селекту увидят не ваш кастомный список, а стандартный привычный. Пользователям не нужно будет подстраивать своё поведение под ваш конкретный сайт, его поведение будет таким же как на всех других сайтах. И ему это удобно, а ради него вы и делали сайт.

Итак, как уже было сказано, для оформления select достаточно CSS3 свойств.

Основное свойство, которое позволит изменить внешний вид селекта, это appearance. Оно заставляет какой-либо элемент принять вид того, что вы захотите, например, можно заставить див стать кнопкой. Однако в рамках нашей задачи интересно значение none, которое означает, что к элементу вообще не нужно применять какой-либо стиль. Таким образом, мы сможем убрать специфичный для селекта атрибут — стрелочку вниз справа.

.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none !important;
}

Как видно, убрать стрелку не составило труда, теперь остаётся добавить несколько тривиальных CSS-свойств вроде рамки, шрифта и прочего. Здесь конечно же можно добавить и скругление уголков, и тени и прочее, всё как нарисовал дизайнер в макете. Главное выпадающий список остаётся нативным.

.select {
    background: transparent;
    display: block;
    width: 100%;
    border: 1px solid #a7a7a7;
    color: #32353a;
    font-family: 16/Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: normal;
    padding: 7px 10px 7px 10px;
    height: 36px;
    vertical-align: top;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none !important;
}

Теперь остаётся добавить фоном стрелку или какую-либо другую иконку. Использовать фон будем, поскольку псевдоэлементы вроде before и after для селекта работать не будут. Для лучшего отображения сайтов на различных устройствах с разным плотностью пикселей, на различных масштабах и т.п. принято использовать SVG иконки. Поэтому с помощью онлайн URL-encoder для SVG сконвертируем иконку в data URI. При этом важно помнить, что тег SVG должен иметь атрибут xmlns="http://www.w3.org/2000/svg".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
    <path fill="#000" fill-rule="evenodd" d="M8,0L4.141,6.993,0.012,0.156Z"/>
</svg>

Получится следующий результат.

%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8,0L4.141,6.993,0.012,0.156Z'/%3E%3C/svg%3E%0A

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

По ссылке ниже приведён рассмотренный в статье пример стилизации select через CSS свойство appearance.

Понравилась статья? — Ставь лайк!

Стилизация Select-Option (почти) без JavaScript / Хабр

Стилизация некоторых стандартных элементов — довольно нетривиальная задача.

Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.

Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.

Для стилизации остального — есть JavaScript.

Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.

На днях у меня, как это часто и бывает, возникла необходимость стилизовать выпадающий список. Однако именно выпадающим списком он становился только в мобильной версии, до этого же он вёл себя как самая обычная группа радиокнопок.

И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:

А зачем?

Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т.д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.

Небольшой ликбез:

Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.

Выпадающие списки состоят из 2 основных элементов:

Select — контейнер для всего списка

Option — элемент списка

Иногда используется ещё и OptGroup (группа элементов списка), но его реализация пока что остаётся на JavaScript’е.

Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.

Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):

Select — disabled, form, multiple, name, required, size

Option — disabled, label, selected, value

На этом, пожалуй, закончим с описанием, и перейдём к реализации.

Уже было написано немало слов, поэтому — ближе к коду:

<form>
  <div>
    <h4>Описание 0 пункта</h4>

    <input type="radio" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input type="radio" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input type="radio" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)

Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:

Select — form, name, required

Option — disabled, label, selected, value

И вот всё, что остаётся реализовать:

Select — disabled, multiple, size

Option — полностью реализовано

Всего лишь добавлением связок input + label, мы сократили список необходимого функционала с 10 пунктов до 3. Неплохо, но ведь это не конец, верно?

Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:

<form>
  <div>
    <input type="checkbox" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input type="checkbox" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input type="checkbox" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.

Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).

Что осталось?

Select — disabled, size

Option — полностью реализовано

Ну что ж, и Select.disabled и Select.size предельно просто реализуются с помощью CSS:

Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.

Select.disabled — для контейнера нужно добавить pointer-events: none, чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.

Итак, основной функционал есть. Чего не хватает?

Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).

А теперь — примеры:

Немного реализации (выпадающее меню с единичным выбором):

И ещё немного (не выпадающее меню с множественным выбором):
Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:

Зачем это нужно?

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

При стилизации выпадающих списков вида:

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

есть серьёзные ограничения стилизации. Поэтому их заменяют на простые списки:

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

которым с помощью JavaScript навешивают весь необходимый функционал.

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

Мало того, что необходимо реализовать весь основной функционал:

переключение пунктов и их взаимодействие

состояния (checked, disabled)

привязка к форме и отправка данных на сервер

инициализация исходных данных (автозаполнение)

сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)

Фактически, если в JavaScript что-то ломается, не важно, из-за чего — скрипт не догрузился, возник баг, внесли правки — при возникновении любой проблемы выпадающий список превращается в… что-то, выглядящее как выпадающий список, но не работающее.

Вообще. Никак.

Для пользователя это будет выглядеть так: есть выпадающий список, но работать с ним нельзя.

Для сервера это будет выглядеть ещё «веселее» — пришла форма, в которой не хватает части данных. Хорошо, что такую ситуацию заранее предусмотрели при разработке… Ведь предусмотрели, правда?

Плюсы получившегося решения:

Весь основной функционал (смотри выше), кроме сброса заголовка ВСЕГДА будет работать. Даже если у человека вообще отключён JavaScript (хоть это и стало практически неактуально). Единственное, что может пойти не так — нельзя будет открыть список. Но и в этом случае отправится значение по умолчанию, плюс смену состояний — список открыт/закрыт — можно реализовать прямо в коде html (защита от проблем с файлом JS), или вообще открывать по наведению.

Данного функционала достаточно для большинства подобных списков. Да, возникнут проблемы у людей, использующих дополнительный функционал (об этом ниже). Но в случае со списком на ul — li для работы и вовсе требуется библиотека, и много что может пойти не так.

Минусы (доп. функционал, который не реализован, и добавляется JavaScript’ом / библиотеками):

Переключение с помощью tab

Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)

Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)

Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)

Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)

Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)

Как видно, ничто из вышеперечисленных минусов не является критичным для подавляющего большинства списков, и при необходимости реализуется с помощью JavaScript, а потому…

Добро пожаловать в мир, где Ваши библиотеки для стилизации Select-Option-подобных списков станут чуточку меньше, а работа с этими списками без библиотек — почти комфортной!

UPD: как оказалось, в случае с чекбоксами атрибут required работает некорректно, и его также необходимо эмулировать с помощью JavaScript (на данный момент обязательными становятся все чекбоксы, отмеченные как required, и только они)

Стилизация select с помощью CSS — urvanov.ru

Нельзя просто так взять и стилизовать select. Тут нужно идти обходными путями. Допустим, что мы хотим заменить изображение кнопки со стрелочкой вниз в select. Напрямую css не позволяет этого сделать, нам придётся схитрить. Мы поместим select внутрь div-а. У div-а сделаем невидимым содержимое, выходящее за его границу, (
overflow: hidden; ) и зададим ему точные размеры. Сам select сделаем с прозрачным фоном (
background: transparent; ). Теперь можно задать фоновую картинку для div-а и выровнять её вправо, тогда она будет вместо кнопки со стрелкой вниз (
background: url(cbx-selector.png) no-repeat right #c0c3ff; ) и она будет видна сквозь прозрачный фон select-а. Теперь важно задать select-у такую ширину, чтобы кнопка вышла за границу div-а и стала не видна на экране.

Вот итоговый файл стилей:

.form_cbx select {
background: transparent;
height: 34px;
border: 0; /* убираем рамку, рамка будет у div-а такой, какой мы её сделаем. */
width: 750px;
}

.form_cbx {
border: 1px solid #0000ff; /* делаем свою рамку */
overflow: hidden; /* всё, что выходит за границу не показываем */
height: 34px;
background: url(cbx-selector.png) no-repeat right #c0c3ff; /* картинка кнопки со стрелкой вниз */
width: 700px;
}

.form_cbx select {

background: transparent;

height: 34px;

border: 0; /* убираем рамку, рамка будет у div-а такой, какой мы её сделаем. */

width: 750px;

}

.form_cbx {

border: 1px solid #0000ff; /* делаем свою рамку */

overflow: hidden; /* всё, что выходит за границу не показываем */

height: 34px;

background: url(cbx-selector.png) no-repeat right #c0c3ff; /* картинка кнопки со стрелкой вниз */

width: 700px;

}

И HTML-файл:

<!DOCTYPE html>
<html>
<head>
<title>Стилизация input select css</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″ />
<link rel=»stylesheet» href=»style.css» />
</head>
<body>
<p>
<a href=»https://urvanov.ru/2015/08/16/%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-select-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-css»>Статья про стилизацию select css</a>
</p>
<div>
<select>
<option value=»1″>Первый пункт</option>
<option value=»2″>Второй пункт</option>
<option value=»3″>Третий пункт</option>
<option value=»4″>Четвёртый пункт</option>
<option value=»5″>Пятый пункт</option>
<option value=»6″>Шестой пункт</option>
</select>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Стилизация input select css</title>

</head>

<body>

<p>

<a href=»https://urvanov.ru/2015/08/16/%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-select-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-css»>Статья про стилизацию select css</a>

</p>

<div>

<option value=»1″>Первый пункт</option>

<option value=»2″>Второй пункт</option>

<option value=»3″>Третий пункт</option>

<option value=»4″>Четвёртый пункт</option>

<option value=»5″>Пятый пункт</option>

<option value=»6″>Шестой пункт</option>

</select>

</div>

</body>

</html>

Результат можно посмотреть здесь:

https://urvanov.ru/projects/css-examples/input-type-select/

Красивый выпадающий список для сайта — делаем выпадающий список

Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.

Выпадающий список для сайта

Не самое простое решение я рассматривал в январе этого года 🙂 :

Посмотреть примерСкачать

Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .

В разметке списка ничего необычного:

<section>
    <label>Выберите своего динозавра:</label>
    <select>
        <option value="1">Стегозавр</option>
        <option value="2">Велоцираптор</option>
        <option value="3">Спинозавр</option>
        <option value="4">Археоптерикс</option>
        <option value="5">Апатозавр</option>
    </select>
</section>

Как говорится: <select> он и в Африке <select>. Внутри него есть теги <option>, в которых находятся элементы списка.

В некоторых примерах вы можете увидеть необычные атрибуты, типа data-class или data-link. Здесь нечего боятся, они нужны для правильного функционирования соответствующего списка, потому что там может храниться дополнительная информация.

Пройдемся немного по стилям.

Основные стили находятся в файле cs-select.css. Здесь находятся стили которые придают списку обычный вид, который мы привыкли видеть.

А для того, чтобы сделать стиль необычным и оригинальным нужно использовать дополнительные свойства. Например для первого примера (перейти и посмотреть) используются следующие стили:

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
    src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
        url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
        url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
div.cs-skin-border {
    background: transparent;
    font-size: 2em;
    font-weight: 700;
    max-width: 600px;
}
 
@media screen and (max-width: 30em) {
    .cs-skin-border { font-size: 1em; }
}
 
.cs-skin-border > span {
    border: 5px solid #000;
    border-color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
 
.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
    font-family: 'icomoon';
    content: '\e000';
}
 
.cs-skin-border ul span::after {
    content: '';
    opacity: 0;
}
 
.cs-skin-border .cs-selected span::after {
    content: '\e00e';
    color: #ddd9c9;
    font-size: 1.5em;
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border.cs-active > span {
    background: #fff;
    border-color: #fff;
    color: #2980b9;
}
 
.cs-skin-border .cs-options {
    color: #2980b9;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
 
.cs-skin-border.cs-active .cs-options {
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border ul span {
    padding: 1em 2em;
    backface-visibility: hidden;
}
 
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
    background: #f5f3ec;
}

А находятся эти стили в отдельном файле (для удобства) cs-skin-border.css.

Вывод

Чего только не сделаешь ради неповторимого дизайна своего сайта! И главное — не бойтесь экспериментировать с дизайном, постоянно улучшайте его. Вдруг вы создадите (путем экспериментов) именно тот, который понравится вашим пользователям и они скажут «Вау, мне нравится этот дизайн, что же еще интересного есть на этом сайте!» 😉 .

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/

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

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

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

Выбор из выпадающего спискаВторой выбор из выпадающего списка

А вот его
HTML код:

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

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

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

</select>

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

Выбор из выпадающего спискаВторой выбор из выпадающего списка

Но раздражающая стрелка выпадающего списка всегда остаётся одной и той же. Не существует прямого способа изменить её стиль, но обходной путь довольно прост.

Сначала нам нужно окружить наш
Select Box
div-контейнером:

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

<div>

<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;
}

.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, так, что стрелка по умолчанию исчезает.

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

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

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

.new-select-style-wpandyou {

border: 1px solid #CCC;

overflow: hidden;

height: 34px;

background: url(http://wpandyou.ru/wp-content/uploads/2013/01/down_arrow_select.jpg) no-repeat right #DDD;

width: 240px;

}

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

Выбор из выпадающего спискаВторой выбор из выпадающего списка

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

Друзья смотрите другие полезные статьи CSS, HTML, jQuery:

Новые материалы для пользователей WordPress:

Удачи и хороших зароботков Друзья!

Обзор jQuery-плагинов для стилизации селектов / Блог компании Айкен / Хабр

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

Не секрет, что стандартные селекты имеют крайне слабый уровень стилизации средствами CSS. В каком-то браузере они чуть лучше, в каком-то чуть хуже, но общая картина складывается весьма грустной. Как обычно, там, где не справляется чистый HTML+CSS, на помощь приходит jQuery.

Плагинов для замены селектов действительно довольно много, однако все же хочется рассмотреть их поближе. В этой статье я хотел бы осветить особенности каждого из плагинов. Их количество действительно огромно, так что обзор не претендует на полноту (но самые основные плагины я разберу). Начём, пожалуй, с самого простого селекта.

Стандартный select

Достоинства:

работает на всех устройствах, в том числе на мобильных телефонах

автоматически подстраивает ширину

без проблем контролируется с помощью jQuery

открывается всегда на видимую часть страницы (так называемое «умное позиционирование»)

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

позволяет группировать опции

позволяет выделять сразу несколько пунктов (если, конечно, прописать необходимые атрибуты)

реагирует на переход Tab’ом

имеет подбор по первой букве

поддерживает скролл колёсиком мышки

Недостатки:

выглядят во всех браузерах по разному

не имеет возможности быть нормально стилизованным

Действительно большой плагин с кучей опций.
Объем: 29KB
Доп функции: (у данного плагина их очень много, приведу основные)

автокомплит

поддерживает мультиселект

поддерживает любую стилизацию любого поля (включая картинки внутри пунктов)

Требования:

jQuery 1.2.6+ (на jQuery 1.5.1 тоже работает)

Достоинства:

можно настроить как душе угодно

Недостатки:

при отключённых скриптах ~~превращается в тыкву~~ абсолютно бесполезен

не подменяет селекты, а создает свою структуру div’ами

сложно установливать и настраивать

не имеет «умного» позиционирования

имеет мультиселект (но на маках вместо того чтобы зажимать cmd, приходится жать shift)

не реагирует на Tab

Гибрид select’а и autocomplete’а. Основан на стандартном селекте, то есть имеет практически все его достоинства и недостатки.
Объем: 12KB
Доп функции: Требования:

jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)

Достоинства:

имеет все достоинства страндартного селекта

работает с отключенным js

прост и понятен в настройке

Недостатки:

В IE6 автокомплит не работает так, как надо, хотя сам селект остается юзабельным.

Специфический плагин, его лучше посмотреть на примере. Не скрывает выбранные пункты, оставляя их видимыми.
Объем: 8KB
Доп функции:

Можно настроить высоту, ширину, скролл, скорость и эффект открывания

Требования:

jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)

Достоинства:

очень прост в установке

довольно легок

имеет мультиселект

Недостатки:

нужен оборачивающий div

не работает в IE6 (расползается по всей странице)

Простой и лёгкий плагин, имеющий, к сожалению, некоторые недостатки.
Объем: 3KB
Доп функции:

отключение плагина

Требования:

jQuery 1.2+ (на jQuery 1.5.1 тоже работает)

Достоинства:

имеет маленький объем

прост в установке

умеет плавно разворачиваться

Недостатки:

открывается только при клике на стрелочку

не умеет группировать опции

отсутствует возможность выделения сразу несколько пунктов

не знает переключения стрелочками на клавиатуре

не умеет задавать высоту выпадающего списка

отсутствует «умное позиционирование»

нажатие на Tab не знает

не поддерживает IE6 (хотя совсем небольшая доработка CSS решает эту проблему)

Простая подмена селекта. Плагин бесполезен из-за недостатков.
Объем: 8KB
Доп функции:

Реализованы стандартные функции обычных селектов

Требования:

jQuery 1.4+ (на jQuery 1.5.1 тоже работает)

Достоинства:

прост в установке

имеет кастомные эффекты появления

Недостатки:

не работает в IE6 и IE7

если селект откажется внизу страницы, то вообще ничего не выпадет

Практически идеальный плагин.
Объем: 16KB
Доп функции:

Реализованы стандартные функции обычных селектовов

Требования:

jQuery 1.4.4+ (на jQuery 1.5.1 тоже работает)

Достоинства:

очень прост в установке

действительно кроссбраузернен

предлагает очень классное описание плагина и «песочницу»

обладает мультиселектом

имеет подгруппы

можно отключать опции

автоподстраивает ширину

реагирует на Tab

реагирует на стрелки клавиатуры и скролл

Недостатки:

небольшие баги в IE6

нет умного позиционирования

Похож на предыдущий, и по некоторым параметрам даже превосходит его.
Объем: 20KB (вместе с дополнительными скриптами)
Доп функции:

Реализованы стандартные функции обычных селектовов

Можно через alt вставлять любую разметку внутрь опций (втом числе картинки)

Требования:

jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)

jquery.ba-throttle-debounce.min.js

jquery.tie.js

Достоинства:

очень прост в установке

есть мультиселект

есть подгруппы

можно отключать опции

автоподстраивает ширину

реагирует на Tab

реагирует на стрелки клавиатуры

реагирует на скролл

Недостатки:

не работает в IE6, просто оставляет стандартные

не знает «умного позиционирования»

тяжело пользоваться без стандартного описания

Плагины, которые на текущем этапе своего развития не достойны нашего внимания:

Выводы

Перед тем, как вы решите воспользоваться стилизированными селектами, обязательно оцените, точно ли вам это нужно.

Обязательно протестируйте работу селектов при отключенном js. Это сэкономит вам кучу нервов, особенно если где-то в другом месте будет ошибка, и селекты не подгрузятся.

Обязательно отключите всю эту красоту для мобильных бразеров, так как в них это выглядит уже не так красиво. Например у iPhone’ов очень удобно продуманы селекты. Для того, чтобы выбрать нужный пункт вовсе необязательно бесить пользователя зумом и прочими извращениями.

Если вы всё-таки решитесь использовать стилизированные селекты на мобильниках, учтите — большинство из них не понимает overflow:scroll, то есть пользователь просто не увидет пунктов меню, к которым нужно скроллить (если плагин не выводит стандартный выпадающий список). Все остальные селекты на мобильниках годятся только для коротких списков, которым точно не потребуется скролл.

Многие плагины используют float:left (в отличии от стандратных, которые можно вставить inline’ово). Конечно, любой плагин можно допилить для того, чтобы он вставлялся инлайново, но это потребует времени.

Я считаю минусом плагина то, что он не работает в IE6, однако для многих это не принципиально. Лично я из двух плагинов, одинаковых по функциональности, я в любом случаю выберу кроссбраузерный.
Объемы плагинов указаны только для их js-части (причём сжатой).

Данный обзор является пробой пера. Надеюсь, он будет полезен хабрасообществу. Приветствуются замечания и дополнения.

upd

Плагины, которые посоветовали хабраюзеры:

cuSel — довольно неплохой плагин, активно развивается. Нет умного позиционирования, проблемы с навигацией клавиатурой, нет поддержки optgroup (посоветовал Shuichi)

Sexy Combo — действительно крутой плагин, даже умное позиционирование есть, но очень медленный, судя по отзывам. Очень плохо реагирует на списки, в которых больше 100 элементов. Разработка остановлена (но есть форк, который, судя по всему, развивается) (посоветовал frog, в его комментарии целая куча различных плагинов для стилизации селектов)

Комбайны, которые заменяют все элементы форм:

Uniform — заменяет даже поля загрузки файлов, имеет несколько подключаемых тем, но имеет и недостатки. (посоветовал skipfish)

jqTransform — про него уже писали на хабре. Судя по комментариям, имеет очень много багов. (посоветовал skipfish)

Niceforms — красивый плагин, но не работает навигация стрелочками, нет умного позиционирования, не поддерживает ie6, последняя версия от 2008 года. (посоветовал Defite)

28 CSS Select Box

Коллекция бесплатных HTML и CSS настраиваемых полей выбора примеров кода: раскрывающийся список , несколько, настраиваемая стрелка и т. Д. Обновление коллекции за июнь 2018 года. 4 новинки.

Окна выбора jQuery

Автор

Фрэнки Дуди
30 октября 2018 г.

О коде

Пользовательское поле выбора

Пользовательский стиль раскрывающегося списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

Гималаи Синг
20 октября 2018 г.

О коде

Поле выбора на чистом CSS с эффектом наведения курсора

Поле выбора на чистом CSS без JavaScript.Когда есть наведение на опцию, движение значка внутри опции определяется направлением наведения, то есть вверх или вниз (эффект наведения с учетом направления).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

О коде

Поле выбора на чистом CSS

Поле выбора без использования JavaScript и собственного элемента.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Деян Бабич
15 декабря 2017 г.

Сделано с

HTML
CSS / SCSS
JavaScript (jQuery.js)

О коде

Адаптивное настраиваемое поле выбора

Адаптивное настраиваемое поле выбора с настраиваемой прокруткой.

Автор

Льюис Робинсон
27 ноября 2017 г.

Сделано с

HTML
CSS / SCSS
JavaScript (jQuery.js)

О коде

Выбор изображения

Выбор изображения с искусственной загрузкой.

Автор

luisdanielroviracontreras
27 ноября 2017 г.

Сделано с

HTML
CSS (materialize.css)
JavaScript (jQuery.js, materialize.js)

О коде

Материализовать Выбрать

Выбор стиля Materialize JS.

Автор

Matheus Продажи
15 ноября 2017 г.

О коде

Обертка Custom Select

Пользовательская оболочка выбора CSS.

Демо-изображение: Custom Select

Custom Select

Пользовательский выбор HTML, CSS и jQuery.
Сделано Алессандро Фальчи
5 апреля 2017 г.

Демонстрационное изображение: Пользовательский выбор варианта

Пользовательский выбор варианта

Пользовательский выбор, разработанный для изменения типичного стиля выбора в браузерах, с использованием JS для отображения списка при щелчке и SCSS для придания ему стиля.Выбранный атрибут работает хорошо, проверьте его.
Сделано Дэни Сантосом
8 февраля 2017 г.

Демо-изображение: Material Design Выберите раскрывающийся список

Material Design Выберите раскрывающийся список

Material Design выберите раскрывающийся список с HTML, CSS и JavaScript.
Сделано Сэмом Мерфи
20 января 2017 г.

Демонстрационное изображение: Выберите вариант взаимодействия

Выберите вариант взаимодействия

Отличный пример чистой анимации. Построен с TweenMax GSAP.
Сделано Бхакти Аль Акбаром
7 декабря 2016 г.

Демо-изображение: поля выбора

Ящики выбора

Select-боксы с HTML, CSS и JS.
Сделано Нипун Парадкар
22 октября 2016 г.

Демонстрационное изображение: CSS-стили и фильтрация Выберите раскрывающийся список

CSS-стили и фильтруемый раскрывающийся список

Выбрать раскрывающийся список — стилизованный и фильтруемый с использованием HTML, CSS и ванильного JS. Работает с использованием поля ввода для извлечения значения из раскрывающегося списка.
Сделано Мари Йоханнесен
13 октября 2016 г.

Демо-изображение: только CSS выберите

Только CSS выберите

Только CSS выберите (радио + флажок).
Сделано Aoyue
24 августа 2016 г.

Демонстрационное изображение: поле выбора с заполнителем

Поле выбора с заполнителем

Поле выбора HTML и CSS с заполнителем.
Сделано Джеймсом Ноуландом
16 мая 2016 г.

Демо-изображение: только CSS выберите

Только CSS выберите

Выберите вход с помощью радиовходов.
Сделано Николасом Уди
9 мая 2016 г.

Демо-изображение: Pure CSS Select

Pure CSS Select

Выберите ввод, только CSS.
Сделано Раулем Баррерой
8 апреля 2016 г.

Демонстрационное изображение: выпадающий список Pretty Select

Выпадающий список Pretty Select

Он по-прежнему использует входные данные для поддержки переменных отправки формы, полагаясь в основном на CSS.
Сделано в j0be
15 января 2016 г.

Демо-изображение: Пользовательское поле выбора

Пользовательское поле выбора

Пользовательское поле выбора с помощью jQuery.
Сделано Виджая Кумар Вулчи
7 января 2016 г.

Демо-изображение: Material Design Select

Material Design Select

Материальный дизайн выберите версию jQuery.
Сделано LukyVJ
3 января 2016 г.

Демо-изображение: Выбор по горизонтали

Выбор по горизонтали

Простой горизонтальный выбор.
Сделано Бхарани
23 ноября 2015 г.

О коде

Поле выбора стиля с CSS

Творческий способ стилизовать выпадающие списки с помощью CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Демо-изображение: Custom Select

Custom Select

Простой способ настроить выбранные входы.
Сделано Кристофом КОРБАЛАНОМ
10 сентября 2015 г.

Демонстрационное изображение: выберите меню

Выберите меню

Выбрать меню с помощью HTML, CSS и JavaScript.
Сделано Пьером Лораном
23 июня 2015 г.

Демо-изображение: Custom Select

Custom Select

Итак, очень простой пользовательский выбор.
Сделано Юсуфом
1 мая 2015 г.

Демо-изображение: Custom Select

Custom Select

Пользовательский выбор с анимацией.
Сделал Николай Таланов
5 сентября 2014 г.

Демо-изображение: Selectionator

Selectionator

Подтверждение концепции для виджета с множественным выбором.
Сделано Бенджамином
23 мая 2014 г.

Демонстрационное изображение: раскрывающаяся колода карточек CSS3

Раскрывающаяся колода карточек CSS3

Раскрывающаяся колода карточек HTML, CSS и JS.
Сделано Тибором Кательбахом
23 июля 2013 г.

14 списков CSS

Коллекция отобранных вручную бесплатных примеров кода HTML и стиля списков CSS . Обновление мартовской коллекции 2019 года. 4 новых примера.

Адаптивный список CSS с подсказками

Автор

Милан Раринг
5 марта 2020 г.

О коде

Анимация контрольного списка — только CSS

Простая анимация контрольного списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Габриэле Корти
6 декабря 2019 г.

О коде

Селекторы 12nth

CSS-список с настраиваемым счетчиком и эффектом прокрутки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Эрин Э.Салливан
15 мая 2019 г.

О коде

Список упорядоченных градиентов

Простой упорядоченный список со стилями с использованием SCSS и HTML5. Градиентный фон переходит от одного к другому и обратно. IE11 дружелюбен.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Простой контрольный список CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Викас Сингх
13 марта 2019 г.

О коде

Красивые стили списка

transfrom: свойство skew и красивые стили списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Маттиа Асторино
7 марта 2019 г.

Сделано с

HTML (мопс) / CSS (PostCSS)

О коде

Список счетчиков градиентов CSS

Пример счетчика CSS с фиксированным градиентом фона.

Совместимые браузеры: Chrome, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Сабина Робарт
1 февраля 2019 г.

О коде

Список дел

Анимированный пользовательский интерфейс с галочкой.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Дайан Ассен
1 февраля 2019 г.

О коде

Список дел

Список дел с анимацией пользовательского интерфейса и микровзаимодействиями.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Ахмед Наср
18 декабря 2018 г.

Сделано с

HTML / CSS (SCSS) / JavaScript

О коде

Список выбора диспетчера файлов

Щелкните элемент списка, чтобы выбрать его.Удерживайте Ctrl для множественного выбора.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Sowmya Seshadri
13 сентября 2018 г.

О коде

Карты

— ListView

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

Тони Бэник
31 августа 2018 г.

Сделано с

HTML (тонкий) / CSS (SCSS) / JavaScript

О коде

Запись по кругу

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Коллин Смит
20 апреля 2018 г.

Сделано с

HTML (мопс) / CSS (стилус)

О коде

Список UI

Концепция пользовательского интерфейса простого упорядоченного списка.Использование псевдоэлементов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Инес Монтани
8 августа 2017 г.

О коде

Нумерованные списки только для CSS с формами капли

Стилизованный нумерованный список с использованием счетчиков CSS и псевдоэлементов для фона в форме капли.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Свен Вольферманн
22 февраля 2016 г.

О коде

Упорядоченный список CSS с ведущим нулем

Упорядоченный список CSS с нулем в начале и разными цветами.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —