Select option css3 оформление: Стилизация Select с помощью css, как будто это 2020

Содержание

Стилизация 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, и только они)

Красивое оформление выпадающего списка на CSS3 и jQuery

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

}

Стилизация select на CSS

Вы здесь:
Главная — CSS — CSS3 — Стилизация select на CSS

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

HTML разметка для select

Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.

<div> <select> <option value="Лимон">Лимон</option> <option value="Банан">Банан</option> <option value="Яблоко">Яблоко</option> </select> </div>

Вот так select выглядит в браузере Chrome, без стилизации. Однако, с помощью CSS стилей, мы слегка его приукрасим: увеличим размер поля, отступы, цвет и стиль рамки, шрифт.

CSS для select

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

.select { position: relative; }

Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров Chrome и Safari нужен –webkit, а для Firefox -moz.

.select select { display: block; width: 100%; /* от ширины блока div */ padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */ background: none; /* убираем фон */ border: 1px solid #ccc; /* рамка */ border-radius: 3px;/* скругление полей формы */ -webkit-appearance: none;/* Chrome */ -moz-appearance: none;/* Firefox */ appearance: none;/* убираем дефолнтные стрелочки */ font-family: inherit;/* наследует от родителя */ font-size: 1rem; color: #444; }

Воссоздадим убранную стрелочку при помощи псевдоэлемента after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.

.select:after { content: ""; display: block; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000 transparent transparent transparent; pointer-events: none; position: absolute; top: 50%; right: 1rem; z-index: 1; margin-top: -3px; }

Как вставить дизайнерскую стрелочку?

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

.select:after { content: " url(.. .) "; }

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

.select select { background: url(...) no-repeat; }

Демонстрация примера

Стилизация select option

Как вы уже заметили, что тег option, остался не стилизованным. Почему его не нужно стилизовать? Дело в том, что браузеры мобильных устройств, по разному отображают опции выбора и совсем не так, как на десктопных. Поэтому пользователи мобильных телефонов, так и так увидели бы выпадающий список без стилизации.

Заключение

Однако лучшим решением на 2019 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.

В видеокурсе «Вёрстка сайта с нуля 2.0», я показываю на живом примере, как верстать сайт по макету.

Создано 22. 05.2019 10:15:50

Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

<a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:

Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт

BB-код ссылки для форумов (например, можете поставить её в подписи):

[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Как стилизовать только с CSS?

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

<option> элементов внутри выбранного элемента в CSS

Как я могу стилизовать <option> s элемента <select> с кроссбраузерной совместимостью? Я знаю много способов JavaScript , которые настраивают выпадающий список для преобразования в <li>, о чем я не спрашиваю.

<select>
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Я спрашиваю, Что может быть возможно только с CSS, с совместимостью для IE9+, Firefox и Chrome.

Я хочу, чтобы стиль был таким же или как можно ближе.

Я попробовал здесь http://jsfiddle.net/jitendravyas/juwz3/3/ , но Chrome не показывает никакого стиля, кроме цвета шрифта, в то время как Firefox показывает еще немного. Как заставить границы и отступы работать и в Chrome?

css

html-select

Поделиться

Источник

Jitendra Vyas

08 декабря 2011 в 11:27

3 ответа

Можно ли еще стилизовать выпадающий список select <option> ? (с 2017 года )
Простой вопрос, казалось бы, не имеющий реального решения ни для одного браузера, кроме Mozilla Firefox. Можем ли мы, начиная с 2017 года, стилизовать выпадающее меню и <option> элементов поля <select> ? Предпочтительно только CSS, но и JavaScript решения подойдут. select { outline: 0;…
Почему мы не можем стилизовать опцию выпадающего списка с помощью CSS?
В Css мы можем обобщенно стилизовать все элементы, но я заметил, что мы не можем стилизовать option элемент select с помощью CSS. Насколько я знаю, Option является дочерним элементом select , тогда каковы возможные причины того, что он не позволяет вам стилизовать этот элемент? Я неоднократно…

EDIT 2015 Май

Отказ от ответственности: я взял фрагмент из ответа, приведенного ниже:

Важное обновление!

В дополнение к WebKit, начиная с Firefox 35 мы сможем использовать свойство appearance :

Используя -moz-appearance со значением none на combobox, теперь удалите
раскрывающуюся кнопку

Итак, теперь, чтобы скрыть стиль по умолчанию, это так же просто, как добавить следующие правила в наш элемент select:

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

Для поддержки IE 11 вы можете использовать [ ::-ms-expand ][15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Старый ответ

К сожалению, то, что вы просите, невозможно с помощью pure CSS. Однако вот что-то похожее, что вы можете выбрать в качестве обходного пути. Проверьте текущий код ниже.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

EDIT

Вот вопрос, который вы задали некоторое время назад.
Как оформить выпадающий список <select> с CSS только без JavaScript?
Как там говорится, только в Chrome и в некоторой степени в Firefox вы можете достичь того, чего хотите. В противном случае, к сожалению, нет кроссбраузерного решения pure CSS для стилизации select.

Поделиться

Savas Vedova

08 декабря 2011 в 12:36

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

Поделиться

danwellman

08 декабря 2011 в 12:19

Я уже играл с выбранными элементами раньше, и, не переопределяя функциональность с помощью JavaScript, я не думаю, что это возможно в Chrome. Независимо от того, используете ли вы плагин или пишете свой собственный код, CSS только не подходит для Chrome/Safari, и, как вы сказали, Firefox лучше справляется с этим.

Поделиться

cchana

08 декабря 2011 в 12:17

Как стилизовать поле подтверждения по умолчанию только с css?
Я хотел бы стилизовать стандартный window.confirm без использования какого-либо дополнительного кода JavaScript, только с CSS. Возможно ли это вообще? И если это так, то как я могу это сделать?
Стиль <select> элемент на основе выбранного <option>
Можно ли стилизовать элемент select на основе того, что option выбрано только с помощью CSS? Я знаю о существующих решениях JavaScript . Я попытался стилизовать сам элемент option, но это придаст стиль только элементу option в списке опций, а не выбранному элементу. select[name=qa_contact]…

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:

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

HTML и CSS с примерами кода

Тег <select> (от англ. select — выбрать) позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.

Конечный вид зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в элементе <option>, а также может изменяться с помощью стилей. Каждый пункт создаётся с помощью элемента <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

Формы

Синтаксис

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

Закрывающий тег обязателен.

Атрибуты

autofocus: Устанавливает, что список получает фокус после загрузки страницы.
disabled: Блокирует доступ и изменение элемента.
form: Связывает список с формой.
multiple: Позволяет одновременно выбирать сразу несколько элементов списка.
name: Имя элемента для отправки на сервер или обращения через скрипты.
required: Список обязателен для выбора перед отправкой формы.
size: Количество отображаемых строк списка.

Также для этого элемента доступны универсальные атрибуты.

autofocus

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

Синтаксис

<select autofocus>
  ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

disabled

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

Синтаксис

<select disabled>
  ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

form

Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами <form>.

Синтаксис

<select form="<идентификатор>">
  ...
</select>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

multiple

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера.

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

Чтобы на сервер отправлялся массив данных, значение атрибута name следует писать с квадратными скобками — hero[], к примеру.

Синтаксис

<select multiple>
  ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения списка на сервере.

Синтаксис

<select name="<имя>">
  ...
</select>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <select> по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

required

Устанавливает список обязательным для выбора перед отправкой формы на сервер. Если пункт списка не выбран, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

<select required>
  ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

size

Устанавливает высоту списка. Если значение атрибута size равно 1, то список превращается в раскрывающийся. При добавлении атрибута multiple к элементу <select> при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

<select size="<число>">
  ...
</select>

Значения

Любое целое положительное число.

Значение по умолчанию

Зависит от атрибута multiple. Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.

Значения ARIA role

<select> (без атрибута multiple и без атрибута size со значением больше 1) — role=combobox
<select> (с атрибутом multiple или с атрибутом size со значением больше 1) — role=listbox

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SELECT</title>
  </head>
  <body>
    <form action="select1.php" method="post">
      <p>
        <select size="3" multiple name="hero[]">
          <option disabled>Выберите героя</option>
          <option value="Чебурашка">Чебурашка</option>
          <option selected value="Крокодил Гена">
            Крокодил Гена
          </option>
          <option value="Шапокляк">Шапокляк</option>
          <option value="Крыса Лариса">Крыса Лариса</option>
        </select>
      </p>
      <p><input type="submit" value="Отправить" /></p>
    </form>
  </body>
</html>

Ссылки

— HTML | MDN

HTML тэг <select> представляет собой элемент управления который содержит меню опций:

Элемент включает глобальные атрибуты.

autofocus HTML5: Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут autofocus, элемент является логическим (булевым).
disabled: Этот логический атрибут указывает что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройки от содержащего его элемента, к примеру fieldset; если у родительского элемента не указан атрибут disabled, то элемент управления доступен для взаимодействия.
form HTML5: Этот атрибут указывает к какой конкретно форме относится элемент <select> . Если атрибут указан, его значением должно быть ID формы в том же документе. Это позволяет размещать элементы <select> где угодно в документе, а не только как потомки форм.
multiple: Этот логический атрибут указывает что возможен выбор нескольких опций в списке. Если данный атрибут не указан, то только одна опция может быть выбрана.
name: Этот атрибут используется для указания имени элемента управления.
required HTML5: Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.
size: Если элемент управления представлен как прокручиваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять <select> в виде прокручиваемого списка. Значение по умолчанию 0.

Примечания Firefox: Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.


<select name="select"> 
  <option value="value1">Значение 1</option>
  <option value="value2" selected>Значение 2</option>
  <option value="value3">Значение 3</option>
</select>

Результат

Примечания

BCD tables only load in the browser

Другие элементы форм: <form>, <legend>, <label>, <button>, <option>, <datalist>, <optgroup>, <fieldset>, <textarea> (en-US), <keygen> (en-US), <input>, <output>, <progress> and <meter>.
События запускаемые <select>: change.

html select — Как стилизовать только с помощью CSS?

РЕДАКТИРОВАТЬ 2015 Май

Отказ от ответственности: я взял отрывок из ответа, приведенного ниже:

Важное обновление!

В дополнение к WebKit, начиная с Firefox 35 , мы сможем использовать свойство Appearance :

Используя -moz-appearance со значением none в поле со списком, теперь удалите
кнопка раскрывающегося списка

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

  выберите {
   -webkit-appearance: нет;
   -моз-внешний вид: нет;
   внешний вид: нет;
}

Для поддержки IE 11 вы можете использовать [ :: - ms-expand ] [15].

  select :: - ms-expand {/ * для IE 11 * /
    дисплей: нет;
}

Старый ответ

К сожалению, то, о чем вы спрашиваете, невозможно при использовании чистого CSS. Однако здесь есть нечто похожее, что вы можете обойти. Проверьте живой код ниже.

  div {
  маржа: 10 пикселей;
  отступ: 10 пикселей;
  граница: сплошной фиолетовый 2px;
  ширина: 200 пикселей;
  -webkit-border-radius: 5 пикселей;
  -moz-border-radius: 5 пикселей;
  радиус границы: 5 пикселей;
}
div> ul {дисплей: нет; }
div: hover> ul {дисплей: блок; фон: # f9f9f9; border-top: сплошной фиолетовый 1px;}
div: hover> ul> li {padding: 5px; border-bottom: 1px solid # 4f4f4f;}
div: hover> ul> li: hover {background: white;}
div: hover> ul> li: hover> a {цвет: красный; }

  
  Выбирать
  
      Элемент 1  
      Пункт 2  
      Пункт 3

РЕДАКТИРОВАТЬ

Вот вопрос, который вы задали некоторое время назад.Как оформить раскрывающийся список входов и соответствующие им элементы допускают только текст. Emoji — это текст. Поэтому в некоторых случаях вы можете использовать смайлики для стилизации выбранных входов, не изобретая колесо раскрывающихся входов.Но было бы здорово, если бы браузеры и производители ОС позволяли больше в будущем.

У меня есть небольшой проект, в котором я хочу, чтобы пользователь мог выбирать из перечисленного набора цветов.

Прямо сейчас у меня есть меню

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

В моем случае в HTML допускала такую гибкость? Скажем, возможность предоставить изображение или иконку?

Конечно, вы должны помнить, что собственное раскрывающееся меню . Однако в iOS на экране под как настраиваемое выпадающее меню на экране для всех устройств и входов, используя стороннюю реализацию JavaScript, такую как response-select.Это обеспечит гибкость, которую можно было бы найти в «раскрывающемся списке».

Однако стоит помнить, что эти реализации не эквивалентны, одна просто более настраиваема, чем другая. А как только вы выберете «собственный» HTML-элемент, вы потеряете все с трудом усвоенные за десятилетия знания, которые были встроены в HTML для обеспечения доступности, удобства использования, отказоустойчивости и т. Д.

Итак, вернемся к моей исходной проблеме. Есть ли легкая победа, когда я могу A) использовать существующую семантику HTML и собственные элементы управления вводом, в то время как B) по-прежнему получать какой-то улучшенный визуальный сигнал, без C) с использованием библиотеки или перестройки ввода со значениями цвета в качестве параметров и небольшими визуальными представлениями каждого цвета в тандеме с текстом.

Сначала, поскольку эмодзи были чисто стилистическими, я решил реализовать их с помощью CSS. Например:

  <стиль>
  option [value = "red"] :: before {
    содержание: «🔴»;
  }


<выбор>

Проблема, как я упоминал ранее, в том, что это не считается действительным и фактически не работает.Единственный способ увидеть смайлики — это поместить их прямо в разметку:

  <выбрать>

Из-за того, как смайлы работают в разных системах и приложениях, приведенный выше пример кода может отображаться иначе, чем на скриншотах с цветными смайликами в качестве визуальных подсказок для текстовых значений. Работает даже в темном режиме!

Было бы замечательно, если бы браузеры и производители ОС могли расширить элемент HTML

`CSS`

Стрелка раскрывающегося списка по умолчанию и граница — все это часть «внешнего вида» элемента формы по умолчанию.Итак, вам нужно убедиться, что Внешний вид: none; устанавливается в CSS стиля во всех браузерах.

  внешний вид : нет; 
  -webkit-appearance : нет; 
  -moz-appearance : none; / * Для IE <= 11 * / 
 select :: - ms-expand {
  display : none; 
}

Обратите внимание, что существует специальный псевдокласс для IE ≤ 11.

А вот полный CSS, управляющий внешним видом элемента select

 select {
 width: 100%; 
 высота: 50 пикселей; 
 размер шрифта: 100%; 
 font-weight: жирный; 
 курсор: указатель; 
 border-radius: 0; 
 цвет фона: # c0392b; 
 граница: отсутствует; 
 нижняя граница: 2px solid # 962d22; 
 цвет: белый; 
 отступ: 10 пикселей; 
 Внешний вид: нет; 
 -webkit-appearance: нет; 
 -моз-внешний вид: нет; 
 отступ: 10 пикселей; 
} / * Для IE <= 11 * / 
 select :: - ms-expand {
 display: none; 
}

К настоящему времени вы должны увидеть:

Базовый внешний вид CSS-стиля select

Селектор : hover используется для выбора элементов при наведении курсора мыши на элемент.Селектор : focus используется для выбора элемента, имеющего фокус. Давайте стилизуем эффект наведения и фокуса с эффектом перехода 0.3s easy на цвет , background-color и border-bottom-color .

 выберите {
 ширина: 100%; 
 высота: 50 пикселей; 
 размер шрифта: 100%; 
 font-weight: жирный; 
 курсор: указатель; 
 border-radius: 0; 
 цвет фона: # c0392b; 
 граница: отсутствует; 
 нижняя граница: 2px solid # 962d22; 
 цвет: белый; 
 отступ: 10 пикселей; 
 padding-right: 38px; 
 Внешний вид: нет; 
 -webkit-appearance: нет; 
 -моз-внешний вид: нет; 
 / * Добавление эффекта перехода * / 
 transition: color 0.3 с легкостью, с легкостью для фонового цвета 0,3 с, с легкостью для окраски нижнего края - 0,3 с; 
} / * Для IE <= 11 * / 
 select :: - ms-expand {
 display: none; 
} select: hover, 
 select: focus {
 color: # c0392b; 
 цвет фона: белый; 
 цвет нижней границы: #DCDCDC; 
}

Теперь вы должны увидеть такой эффект:

Добавление эффекта наведения и фокусировки

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

`Разметка HTML`

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

`CSS`

Вот стиль CSS для иконки.Обратите внимание, мы используем переход background-color и border-color .

 .select-icon {
 положение: абсолютное; 
 верх: 4 пикселя; 
 справа: 4 пикселя; 
 ширина: 30 пикселей; 
 высота: 36 пикселей; 
 указатель-события: нет; 
 граница: сплошная 2px # 962d22; 
 padding-left: 5px; 
 переход: плавность фонового цвета 0,3 с, граница цвета 0,3 с; 
} 
 .select-icon svg.icon {
 переход: заливка с легкостью 0,3 с; 
 заливка: белая; 
}

Вот CSS-эффект наведения и фокуса для значка.Обратите внимание: селектор CSS ~ используется для выбора .select-icon , которому предшествует select

 select: hover ~ .select-icon, 
 select: focus ~ .select-icon {
 background-color : белый; 
 цвет границы: #DCDCDC; 
} 
 select: hover ~ .select-icon svg.icon, 
 select: focus ~ .select-icon svg.icon {
 fill: # c0392b; 
}

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

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

И на этом все.Спасибо за чтение, вот полный код:

`: HTML Select element — HTML: HyperText Markup Language`

HTML-элемент . Ему дается атрибут id , чтобы его можно было связать с для целей доступности, а также атрибут name для представления имени связанной точки данных, отправленной на сервер.Каждая опция меню определяется элементом , вложенным в имеет некоторые уникальные атрибуты, которые вы можете использовать для управления им, например multiple , чтобы указать, можно ли выбрать несколько параметров, и size , чтобы указать, сколько параметров должно отображаться одновременно. Он также принимает большинство атрибутов ввода общей формы, таких как требуется , отключено , автофокус и т. Д.

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

Дополнительные примеры см. В разделе Виджеты собственных форм: раскрывающееся содержимое.

Этот элемент включает глобальные атрибуты.

автозаполнение

DOMString , предоставляющая подсказку для функции автозаполнения пользовательского агента. См. Атрибут автозаполнения HTML для получения полного списка значений и подробностей о том, как использовать автозаполнение.

автофокус

Этот логический атрибут позволяет указать, что элемент управления формы должен иметь фокус ввода при загрузке страницы.Только один элемент формы в документе может иметь атрибут autofocus .

отключен

Этот логический атрибут указывает, что пользователь не может взаимодействовать с элементом управления. Если этот атрибут не указан, элемент управления наследует свои настройки от содержащего элемента, например ; если нет содержащего элемента с установленным атрибутом disabled , то элемент управления включен.

форма

Элемент

, чтобы связать связан с его предком элемент, если таковой имеется.) Этот атрибут позволяет связать элементы с атрибутом multiple : Пользователи мыши могут удерживать клавиши Ctrl , Command или Shift (в зависимости от того, что имеет смысл для вашей операционной системы), а затем щелкать несколько параметров, чтобы выбрать / отменить их выбор. Предупреждение: Механизм выбора нескольких несмежных элементов с помощью клавиатуры, описанный ниже, в настоящее время работает только в Firefox. В macOS ярлыки Ctrl + Up и Ctrl + Down конфликтуют с ярлыками ОС по умолчанию для Mission Control и Application windows , поэтому вам придется отключить их, прежде чем они появятся. Работа. Пользователи клавиатуры могут выбрать несколько смежных элементов: Фокусировка на элементе (например, с помощью вкладки ). Удерживая нажатой клавишу Ctrl , затем используйте клавиши курсора Вверх, и Вниз, , чтобы изменить параметр «сфокусированного» выбора, т.е.е. тот, который будет выбран, если вы решите это сделать. Вариант выбора «с фокусом» выделяется пунктирным контуром так же, как и ссылка с привязкой к клавиатуре. Нажатие Пробел для выбора / отмены выбора «сфокусированных» опций выбора. Элемент сложна, и ее трудно контролировать. Если вы хотите получить полный контроль, вам следует подумать об использовании библиотеки с хорошими возможностями для стилизации виджетов форм или попробовать развернуть собственное раскрывающееся меню с использованием несемантических элементов, JavaScript и WAI-ARIA для обеспечения семантики. Для получения дополнительной информации о стилизации . Базовый выбор В следующем примере создается очень простое раскрывающееся меню, второй вариант которого выбран по умолчанию. Расширенный выбор с несколькими функциями Следующий пример более сложен и демонстрирует дополнительные функции, которые вы можете использовать в элементе Вы увидите, что: Можно выбрать несколько параметров, потому что мы включили атрибут multiple .
Атрибут size вызывает одновременное отображение только 4 строк; вы можете прокрутить, чтобы просмотреть все варианты.
Мы включили элементов , чтобы разделить параметры на разные группы. Это чисто визуальная группировка, ее визуализация обычно состоит из имени группы, выделенного жирным шрифтом, и отступа параметров.
Параметр «Хомяк» включает отключенный атрибут и поэтому не может быть выбран вообще.
Настройка стилей выбора
В этом примере показано, как можно использовать некоторые CSS и JavaScript для предоставления расширенных настраиваемых стилей для поля ( s) в родительскую оболочку и повторно реализует стандартное ожидаемое поведение с использованием дополнительных элементов HTML и JavaScript. Это включает в себя базовое поведение вкладок для обеспечения доступности клавиатуры.
Отображает некоторые стандартные атрибуты с на атрибуты данных новых элементов для управления состоянием и CSS.
Примечание: Поддерживаются не все встроенные функции, это подтверждение концепции. ИТ начинается со стандартного HTML, но те же результаты могут быть достигнуты, начиная с данных JSON, пользовательского HTML или других решений.
HTML
<форма> Стандартные элементы управления <выберите name = 1A id = выберите autocomplete = off требуется > Пользовательские элементы управления <выберите name = "2A" autocomplete = "выкл" требуется >
CSS
кузов { семейство шрифтов: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif } .select: focus { цвет границы: синий; } html body form fieldset # custom div.select [data-multiple] div.header { дисплей: нет; } html body form fieldset # custom div.select div.header { содержание: '↓'; отображение: -webkit-inline-box; дисплей: -ms-inline-flexbox; дисплей: встроенный гибкий; -webkit-box-align: center; -ms-flex-align: center; align-items: center; отступ: 0; положение: относительное; } html body form fieldset # custom div.select div.header :: after { содержание: '↓'; выровнять себя: растянуть; дисплей: гибкий; выровнять контент: центр; justify-content: center; justify-items: center; align-items: center; обивка:.5em; } html body form fieldset # custom div.select div.header: hover: after { цвет фона: синий; } .select .header select { -webkit-appearance: нет; -моз-внешний вид: нет; внешний вид: нет; семейство шрифтов: наследовать; размер шрифта: наследовать; отступ: 0; ширина границы: 0; ширина: 100%; гибкость: 1; дисплей: нет; } .select .header select optgroup { дисплей: нет; } .select select div.option { дисплей: нет; } html body form fieldset # custom div.select { выбор пользователя: нет; размер коробки: рамка-рамка; положение: относительное; радиус границы: 4 пикселя; стиль границы: сплошной; ширина границы: 0; цвет границы: серый; ширина: авто; дисплей: встроенный блок; } html body form fieldset # custom div.select: focus { цвет границы: синий; } html body form fieldset # custom div.select:hover { цвет границы: синий; } html body form fieldset # custom div.select [data-open] { граница-нижний-левый-радиус: 0; граница-нижний-правый-радиус: 0; } html body form fieldset # custom div.select [открытие данных] datalist { дисплей: начальный; } html body form fieldset # custom div.select datalist { -webkit-appearance: нет; -моз-внешний вид: нет; внешний вид: нет; позиция: абсолютная; стиль границы: сплошной; ширина границы: 1px; цвет границы: серый; слева: 0; дисплей: нет; ширина: 100%; размер коробки: рамка-рамка; z-индекс: 2; граница-нижний-левый-радиус: 4px; граница-нижний-правый-радиус: 4px; } html body form fieldset # custom div.выберите datalist div.option { цвет фона: белый; нижнее поле: 1px; курсор: указатель; заполнение: 0.5em; ширина границы: 0; } html body form fieldset # custom div.select datalist div.option: hover { цвет фона: синий; цвет белый; } html body form fieldset # custom div.select datalist div.option: focus { цвет фона: синий; цвет белый; } html body form fieldset # custom div.select datalist div.option: checked { цвет фона: синий; цвет белый; } html body form fieldset # custom div.выберите div.optgroup div.option [данные отключены] { цвет: серый; } html body form fieldset # custom div.select div.optgroup div.option [данные проверены] { цвет фона: синий; цвет белый; } html body form fieldset # custom div.select div.optgroup div.label { font-weight: жирный; } html body form fieldset # custom div.select div.optgroup div.option div.label { шрифт: нормальный; набивка: .25em; } html body form fieldset # custom div.select div.header { гибкость: 1; дисплей: гибкий; ширина: авто; размер коробки: рамка-рамка; ширина границы: 1px; стиль границы: наследование; цвет границы: наследовать; граница-радиус: наследовать; } html body form fieldset # custom div.выберите div.header span { гибкость: 1; заполнение: .5em; }
JavaScript
const selects = custom.querySelectorAll ('выбрать'); for (const select of selects) { const div = document.createElement ('div'); const header = document.createElement ('div'); const datalist = document.createElement ('datalist'); const optgroups = select.querySelectorAll ('optgroup'); const span = document.createElement ('диапазон'); const options = select.options; const parent = select.parentElement; const multiple = select.hasAttribute ('несколько'); const onclick = function (e) { const disabled = this.hasAttribute ('данные отключены'); select.value = this.dataset.value; span.innerText = this.dataset.label; если (отключено) возврат; if (multiple) { if (e.shiftKey) { const checked = this.hasAttribute ("данные проверены"); if (проверено) { this.removeAttribute ("данные проверены"); } еще { это.setAttribute ("данные проверены", ""); }; } еще { const options = div.querySelectorAll ('. option'); for (i = 0; i
Результат
Таблицы BCD загружаются только в браузере
Как оформить раскрывающийся список с помощью CSS?

< html >
< голова >
< стиль 9 9002 9000 h2 {
цвет: зеленый;
}
select {
-webkit-appearance: none;
-моз-внешний вид: нет;
-ms-внешний вид: нет;
внешний вид: отсутствует;
контур: 0;
фон: зеленый;
фоновое изображение: нет;
граница: сплошной черный 1 пиксель;
}
.выберите положение {
: относительное;
дисплей: блок;
ширина: 20em;
высота: 3em;
высота строки: 3;
фон: # 2C3E50;
переполнение: скрыто;
радиус границы:.25em;
}
выберите {
ширина: 100%;
высота: 100%;
маржа: 0;
заполнение: 0 0 0 .5em;
цвет: #fff;
курсор: указатель;
}
select :: - ms-expand {
дисплей: нет;
}
.select :: after {
content: '\ 25BC';
позиция: абсолютная;
верх: 0;
правый: 0;
снизу: 0;
заполнение: 0 1em;
фон: # 34495E;
события указателя: нет;
}
.выберите: hover :: после {
цвет: # F39C12;
}

.select :: after {
-webkit-transition: .25s all easy;
-o-переход: .25s all easy;
переход:.25s все непринужденно;
}
стиль >
головка >
< корпус > 9000
< центр >
< h2 > GeeksforGeeks h2 >
< div класс = «выберите» >
< выберите имя = «slct» id = «slct» >
< option > Предметы информатики option >
< опция значение = "1" > Операционная система опция >
< опция значение = "2" > Компьютерные сети option >
< option value = "3" > Структура данных опция >
< опция значение = "4" > Алгоритм опция >
< опция значение = "5" > Программирование на C опция > 9 0005
< опция значение = "6" > JAVA опция >
выберите >
div >
центр >
корпус >
html >
10 бесплатных фрагментов окна выбора CSS и JavaScript
Поля выбора HTML по умолчанию служат нам десятилетиями.Но в современную эпоху будет справедливо сказать, что они немного… несвежие.
Дизайнеры могут работать лучше, а благодаря улучшениям в CSS легко настраивать поля выбора. Не говоря уже о том, что весь открытый исходный код находится в свободном доступе в Интернете.
Я собрал коллекцию из 10 моих лучших стилей ручной работы. Они не выпускаются как плагины, а вместо этого полагаются на шаблоны для настройки JavaScript и CSS. Но все они так же просты в настройке и даже переделке для ваших собственных целей.
Панель инструментов веб-дизайнера
Неограниченное количество загрузок: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!
1. Пользовательское меню выбора
Началом коллекции являются пользовательские стили меню выбора Уоллеса Эрика.
Он использует как CSS для рестайлинга, так и JavaScript для настройки UX меню. Они ведут себя немного иначе, чем стандартные элементы HTML, и я думаю, что их немного удобнее использовать.
Вы можете выбрать размер и цветовой стиль меню или работать с настройками Уоллеса по умолчанию.Лучше всего он включает в себя настраиваемый дизайн поля загрузки, который, если вы когда-либо пытались изменить стиль, вы поймете, что это сложно.
Отличное место для начала, если вам просто нужны чистые, но свежо выглядящие избранные меню, которые работают.
2. Простой выбор
Вот еще одно очень простое поле выбора, которое призвано более естественно вписаться в любой макет.
Здесь используются более тонкие цвета с простой черно-белой цветовой схемой. Но он также использует JavaScript для анимации меню выбора в поле зрения и вне его.
Он работает путем нацеливания на скрытое поле ввода, которое ведет себя точно так же, как - поле выбора. Таким образом, вы по-прежнему можете извлекать данные из внешнего интерфейса в свои формы, потому что это решение технически не использует фактический элемент
Имя *
Email *
Сайт

Select option css3 оформление: Стилизация Select с помощью css, как будто это 2020

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

Красивое оформление выпадающего списка на CSS3 и jQuery

Стилизация select на CSS

HTML разметка для select

CSS для select

Стилизация select option

Заключение

Как стилизовать только с CSS?

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

3 ответа

Важное обновление!

Похожие вопросы:

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

HTML и CSS с примерами кода

Синтаксис

Атрибуты

autofocus

disabled

form

multiple

name

required

size

Значения ARIA role

Спецификации

Описание и примеры

Ссылки

— HTML | MDN

Результат

Примечания

html select — Как стилизовать только с помощью CSS?

Важное обновление!

CSS

Разметка HTML

CSS

: HTML Select element — HTML: HyperText Markup Language

Базовый выбор

Расширенный выбор с несколькими функциями

Настройка стилей выбора

HTML

CSS

JavaScript

Результат

Как оформить раскрывающийся список с помощью CSS?

10 бесплатных фрагментов окна выбора CSS и JavaScript

1. Пользовательское меню выбора

2. Простой выбор

Рубрики

`CSS`

`Разметка HTML`

`CSS`

`: HTML Select element — HTML: HyperText Markup Language`

`Результат`

`Как оформить раскрывающийся список с помощью CSS?`

`10 бесплатных фрагментов окна выбора CSS и JavaScript`

`1. Пользовательское меню выбора`

`2. Простой выбор`

`Рубрики`