Стилизация 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 , тогда каковы возможные причины того, что он не позволяет вам стилизовать этот элемент? Я неоднократно…
70
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
4
Нет никакого кроссбраузерного способа стилизации элементов опций, конечно, не в той степени, в какой это показано на вашем втором скриншоте. Возможно, вы сможете сделать их полужирными и установить размер шрифта, но на этом все и закончится…
Поделиться
danwellman
08 декабря 2011 в 12:19
2
Я уже играл с выбранными элементами раньше, и, не переопределяя функциональность с помощью 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]…
Похожие вопросы:
Как стилизовать опцию select с помощью css
Мне нужно стилизовать мой select с css, так что это выглядит как изображение ниже, есть 2 вещи, которые я не могу понять, когда выбрана опция удалить классический синий фон, как сделать отступ…
Есть ли какой-нибудь способ стилизовать optgroup с помощью CSS на iPad?
Есть ли какой-нибудь способ стилизовать элемент HTML ‘optgroup’ с помощью CSS? Особенно важно, чтобы стиль появился в мобильном браузере iOS для iPad. HTML-это: <optgroup label=Great Britain>…
Как мне стилизовать выпадающий список <select> только с CSS?
Существует ли CSS-единственный способ стилизовать выпадающий список <select> ? Мне нужно стилизовать форму <select> как можно больше по-человечески, без каких-либо JavaScript. Какие…
Можно ли еще стилизовать выпадающий список select <option> ? (с 2017 года )
Простой вопрос, казалось бы, не имеющий реального решения ни для одного браузера, кроме Mozilla Firefox. Можем ли мы, начиная с 2017 года, стилизовать выпадающее меню и <option> элементов поля…
Почему мы не можем стилизовать опцию выпадающего списка с помощью CSS?
В Css мы можем обобщенно стилизовать все элементы, но я заметил, что мы не можем стилизовать option элемент select с помощью CSS. Насколько я знаю, Option является дочерним элементом select , тогда…
Как стилизовать поле подтверждения по умолчанию только с css?
Я хотел бы стилизовать стандартный window.confirm без использования какого-либо дополнительного кода JavaScript, только с CSS. Возможно ли это вообще? И если это так, то как я могу это сделать?
Стиль <select> элемент на основе выбранного <option>
Можно ли стилизовать элемент select на основе того, что option выбрано только с помощью CSS? Я знаю о существующих решениях JavaScript . Я попытался стилизовать сам элемент option, но это придаст…
Стиль <select> меню с использованием только CSS/CSS3
Я хочу знать, почему мы не можем стилизовать меню выбора(а не выпадающее меню), используя только CSS, как мы можем стилизовать кнопки или флажки. Я сталкивался со многими статьями, которые…
Как стилизовать значение «option» в раскрывающемся списке select?
Я пытаюсь стилизовать теги option в этом поле select , но когда я нажимаю на него, теги опций шире, чем поле выбора, но они должны быть равны. Можно ли сделать это через css? Вот текущий прогресс:…
Как стилизовать поле OPTION с помощью текста INLINE
Я пытаюсь стилизовать коробки SELECT / OPTION с помощью встроенного CSS. background-color , похоже, не работает: <option>text</option> В принципе, я хочу 3-4…
HTML, CSS: Делаем стильный тег Select Box с помощью CSS
Мне часто приходится использовать
Select Box (
<select>) при создании формы с наличием выпадающего списка. Мне потребовалось время, чтобы выяснить, как легко и просто можно задать стиль
Select Box-а с использованием лишь
CSS, поскольку некоторые части зависят от браузера, например, выпадание вниз и не редактируются стандартным набором стилей.
Так выглядит
Select Box по умолчанию:
Выбор из выпадающего спискаВторой выбор из выпадающего списка
А вот его
HTML код:
<select>
<option>Выбор из выпадающего списка</option>
<option>Второй выбор из выпадающего списка</option>
</select>
| <select> <option>Выбор из выпадающего списка</option> <option>Второй выбор из выпадающего списка</option> </select> |
В
Select-Box-е есть определённые параметры, с помощью которых Вы можете сделать стилизацию
select и которые можно настраивать, например, цвет шрифта, границы, цвет, отступы и фон:
Выбор из выпадающего спискаВторой выбор из выпадающего списка
Но раздражающая стрелка выпадающего списка всегда остаётся одной и той же. Не существует прямого способа изменить её стиль, но обходной путь довольно прост.
Сначала нам нужно окружить наш
Select Box
div-контейнером:
<div>
<select>
<option>Выбор из выпадающего списка</option>
<option>Второй выбор из выпадающего списка</option>
</select>
</div>
| <div> <select> <option>Выбор из выпадающего списка</option> <option>Второй выбор из выпадающего списка</option> </select> </div> |
Далее нужно добавить немного
CSS, чтобы убедиться, что элементы
Select Box-а оформлены определённым образом:
.new-select-style-wpandyou select {
border-radius: 0;
background: transparent;
height: 34px;
padding: 5px;
border: 0;
font-size: 16px;
line-height: 1;
-webkit-appearance: none;
width: 268px;
}
| .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 {цвет: красный; }
РЕДАКТИРОВАТЬ
Вот вопрос, который вы задали некоторое время назад.Как оформить раскрывающийся список
31 CSS Select Box
Коллекция бесплатных настраиваемых полей выбора HTML и CSS примеров кода: раскрывающийся список , несколько, настраиваемая стрелка и т. Д. Обновление коллекции за апрель 2019 года. 4 новинки.
- Окна выбора jQuery
- Коробки с множественным выбором для начальной загрузки
Автор
- Стефани Эклс
О коде
Пользовательский стиль выбора поля с использованием только CSS
Демонстрация того, как создать кроссбраузерный выбор с настраиваемым стилем.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Выпадающий список только CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Андреас Сторм
Сделано с
- HTML (мопс) / CSS (стилус)
О коде
Выберите (заполнитель отключен)
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Фрэнки Дуди
О коде
Пользовательское поле выбора
Пользовательский стиль раскрывающегося списка.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Автор
- Гималаи Синг
О коде
Поле выбора на чистом CSS с эффектом наведения при наведении курсора
Поле выбора на чистом CSS без какого-либо JavaScript.Когда есть наведение на опцию, движение значка внутри опции определяется направлением наведения, то есть при наведении вверх или при наведении (эффект наведения с учетом направления).
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
О коде
Поле выбора на чистом CSS
Поле выбора без использования JavaScript и собственного элемента.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Деян Бабич
Сделано с
- HTML
- CSS / SCSS
- JavaScript (jQuery.js)
О коде
Адаптивное настраиваемое поле выбора
Отзывчивое настраиваемое поле выбора с настраиваемой прокруткой.
Автор
- Льюис Робинсон
Сделано с
- HTML
- CSS / SCSS
- JavaScript (jQuery.js)
О коде
Выбор изображения
Выбор изображения с искусственной загрузкой.
Автор
- Matheus Продажи
О коде
Пользовательская оболочка выбора
Пользовательская оболочка выбора 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 г.
Автор
- Пол Грант
О коде
Styled Выбрать опции
Стилизованные варианты выбора с использованием CSS3 и Flexbox.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Демо-изображение: Выбор по горизонтали
Выбор по горизонтали
Простой горизонтальный выбор.
Сделано Бхарани
23 ноября 2015 г.
О коде
Поле выбора стиля
с помощью CSS
Творческий способ стилизовать выпадающие списки с помощью CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Демо-изображение: Custom Select
Custom Select
Простой способ настройки выбранных входов.
Автор Christophe CORBALAN
10 сентября 2015 г.
Демонстрационное изображение: выберите меню
Выберите меню
Выберите меню с помощью HTML, CSS и JavaScript.
Автор Pierre Laurent
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 г.
Предоставление стиля для выбора значений опций
TLDR;
входов и соответствующие им элементы допускают только текст. Emoji — это текст. Поэтому в некоторых случаях вы можете использовать смайлики для стилизации выбранных входов, не изобретая колесо раскрывающихся входов.Но было бы здорово, если бы браузеры и производители ОС позволяли больше в будущем.
У меня есть небольшой проект, в котором я хочу, чтобы пользователь мог выбирать из перечисленного набора цветов.
Прямо сейчас у меня есть меню
с элементами для представления каждого выбора цвета:
<выбрать>
...
Хотя я мог бы использовать
с предопределенным списком значений, это в конечном итоге остается предложениями для ввода, в то время как все еще можно выбрать любой цвет, .
В моем случае
имеет смысл, потому что у него ограниченный набор опций.
Однако было бы неплохо, если бы я мог сделать параметры более наглядными. Например: префикс каждого текстового значения цвета с визуальным представлением соответствующего цвета, как то, что вы видите в настройках macOS для «Цвет выделения»:
Было бы неплохо, если бы опция
в HTML допускала такую гибкость? Скажем, возможность предоставить изображение или иконку?
Конечно, вы должны помнить, что собственное раскрывающееся меню
не является «раскрывающимся списком» во всех сценариях.Разные устройства и операционные системы обрабатывают этот ввод по-разному. В macOS, например, вы видите раскрывающийся список при запуске
. Однако в iOS на экране под
появляется не раскрывающийся список, а скорее виртуальная клавиатура, предназначенная для обработки этого типа ввода:
Конечно, вы можете перепроектировать меню
как настраиваемое выпадающее меню на экране для всех устройств и входов, используя стороннюю реализацию JavaScript, такую как response-select.Это обеспечит гибкость, которую можно было бы найти в «раскрывающемся списке».
Однако стоит помнить, что эти реализации не эквивалентны, одна просто более настраиваема, чем другая. А как только вы выберете «собственный» HTML-элемент, вы потеряете все с трудом усвоенные за десятилетия знания, которые были встроены в HTML для обеспечения доступности, удобства использования, отказоустойчивости и т. Д.
Итак, вернемся к моей исходной проблеме. Есть ли легкая победа, когда я могу A) использовать существующую семантику HTML и собственные элементы управления вводом, в то время как B) по-прежнему получать какой-то улучшенный визуальный сигнал, без C) с использованием библиотеки или перестройки ввода
с нуля?
Самое большое ограничение — насколько ограничен элемент .Текст — единственное допустимое содержание.
технически недействителен. Даже опция
:: до
недействительна. Только персонажи.
В поисках того, как добавить бликов к элементам , я наткнулся на это переполнение стека, которое указывает на возможность использования кодовых точек в сочетании с настраиваемыми шрифтами для получения настраиваемых глифов.
И тут в моей голове загорелась лампочка: смайлики — это персонажи! Почему бы не использовать смайлики в качестве цветовых подсказок? В моем конкретном случае, конечно же, должны быть смайлики из перечислений основных цветов, с которыми я работаю?
Быстрый поиск по смайликам показывает, что есть смайлики для каждого цвета, который мне нужен.Если я сложу все эти ингредиенты вместе, я получу собственный
со значениями цвета в качестве параметров и небольшими визуальными представлениями каждого цвета в тандеме с текстом.
Сначала, поскольку эмодзи были чисто стилистическими, я решил реализовать их с помощью CSS. Например:
<стиль>
option [value = "red"] :: before {
содержание: «🔴»;
}
<выбор>
Проблема, как я упоминал ранее, в том, что это не считается действительным и фактически не работает.Единственный способ увидеть смайлики — это поместить их прямо в разметку:
<выбрать>
Из-за того, как смайлы работают в разных системах и приложениях, приведенный выше пример кода может отображаться иначе, чем на скриншотах
, которые я опубликовал ранее.Он также может отличаться от того, что вы видите в VSCode:
.
В любом случае, это решение работает прилично, хотя размещение смайликов первого типа прерывает быструю навигацию с клавиатуры, то есть нажатие «Y» на клавиатуре при открытом раскрывающемся меню не приводит к переходу к «Желтому» в качестве выбранного варианта. потому что первый символ этого не является «Y». Это желтый смайлик. Если вы хотите поддерживать эту функцию, вам нужно будет добавить смайлики в последнюю очередь.
Жаль, что я не смог заставить решение псевдоэлементов работать в CSS! Это было бы лучшее из обоих миров.
Так или иначе, теперь у меня есть несколько хороших входов
с цветными смайликами в качестве визуальных подсказок для текстовых значений. Работает даже в темном режиме!
Было бы замечательно, если бы браузеры и производители ОС могли расширить элемент HTML
, чтобы веб-разработчики могли использовать те же самые элементы управления пользовательским интерфейсом, которые есть у обычных пользователей ОС:
CSS-only Custom Styled Select. Элемент HTMLselect, стилизованный напрямую… | автор Б.Chen
Элемент select
уже давно сложно согласованно стилизовать во всех браузерах. Мы использовали JavaScript для создания элемента управления, подобного select, из различных элементов. Например, мы использовали неупорядоченные списки ul
или div
для создания настраиваемых компонентов выбора.
Оказывается, обходные пути JavaScript сложно поддерживать из-за следующих проблем:
- 💣 Проблемы с доступностью
- 💣 Плохо для программ чтения с экрана
- 💣 Трудно использовать на мобильных устройствах, особенно когда список опций длинный
- 💣 Не работает, когда JavaScript отключен
- Может быть, не подходит для SEO
- Намного больше кода для поддержки
- Повышенный риск появления ошибки
Быстрый пример
Во-первых, для фона, вот без стиля select
элемент.В зависимости от того, какой браузер вы используете, он будет выглядеть по-разному.
Chrome default unstyled select
Ниже тот же элемент select
, стилизованный непосредственно с использованием только CSS.
Выбор в стиле чистого CSS
Разметка HTML
Давайте просто воспользуемся выбранным по умолчанию HTML (без каких-либо дополнительных тегов 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
для представления имени связанной точки данных, отправленной на сервер.Каждая опция меню определяется элементом , вложенным в
.
Каждый элемент должен иметь атрибут value , содержащий значение данных для отправки на сервер при выборе этой опции. Если атрибут
value
не включен, по умолчанию используется текст, содержащийся внутри элемента. Вы можете включить атрибут selected
в элемент , чтобы сделать его выбранным по умолчанию при первой загрузке страницы.
Элемент
имеет некоторые уникальные атрибуты, которые вы можете использовать для управления им, например multiple
, чтобы указать, можно ли выбрать несколько параметров, и size
, чтобы указать, сколько параметров должно отображаться одновременно. Он также принимает большинство атрибутов ввода общей формы, таких как требуется
, отключено
, автофокус
и т. Д.
Вы можете дополнительно вложить элементы в элементы
, чтобы создать отдельные группы параметров внутри раскрывающегося списка.
Дополнительные примеры см. В разделе Виджеты собственных форм: раскрывающееся содержимое.
Этот элемент включает глобальные атрибуты.
-
автозаполнение
-
DOMString
, предоставляющая подсказку для функции автозаполнения пользовательского агента. См. Атрибут автозаполнения HTML для получения полного списка значений и подробностей о том, как использовать автозаполнение. -
автофокус
- Этот логический атрибут позволяет указать, что элемент управления формы должен иметь фокус ввода при загрузке страницы.Только один элемент формы в документе может иметь атрибут
autofocus
. -
отключен
- Этот логический атрибут указывает, что пользователь не может взаимодействовать с элементом управления. Если этот атрибут не указан, элемент управления наследует свои настройки от содержащего элемента, например
; если нет содержащего элемента с установленным атрибутом
disabled
, то элемент управления включен. -
форма
Элемент
в любом месте документа, а не только внутри
. Он также может переопределить элемент-предок
.-
кратное
- Этот логический атрибут указывает, что в списке можно выбрать несколько параметров. Если он не указан, то одновременно можно выбрать только один вариант. Если указано
, несколько
, большинство браузеров будут отображать поле списка с прокруткой вместо раскрывающегося списка с одной строкой. -
наименование
- Этот атрибут используется для указания имени элемента управления.
-
требуется
- Логический атрибут, указывающий, что должна быть выбрана опция с непустым строковым значением.
-
размер
Если элемент управления представлен в виде окна списка с прокруткой (например, если указано
несколько
), этот атрибут представляет количество строк в списке, которые должны быть видимы одновременно. Браузеры не обязаны представлять элемент выбора в виде прокручиваемого списка. Значение по умолчанию —0
.Примечание: Согласно спецификации HTML5 значение размера по умолчанию должно быть
1
; однако на практике было обнаружено, что это нарушает работу некоторых веб-сайтов, и ни один другой браузер в настоящее время не делает этого, поэтому Mozilla решила продолжать возвращать0
на данный момент с Firefox.
Выбор нескольких параметров
На настольном компьютере существует несколько способов выбора нескольких параметров в элементе
с атрибутом multiple
:
Пользователи мыши
могут удерживать клавиши Ctrl , Command или Shift (в зависимости от того, что имеет смысл для вашей операционной системы), а затем щелкать несколько параметров, чтобы выбрать / отменить их выбор.
Предупреждение: Механизм выбора нескольких несмежных элементов с помощью клавиатуры, описанный ниже, в настоящее время работает только в Firefox.
В macOS ярлыки Ctrl + Up и Ctrl + Down конфликтуют с ярлыками ОС по умолчанию для Mission Control и Application windows , поэтому вам придется отключить их, прежде чем они появятся. Работа.
Пользователи клавиатуры могут выбрать несколько смежных элементов:
- Фокусировка на элементе
- Выбор элемента вверху или внизу диапазона, который они хотят выбрать, с помощью клавиш курсора Вверх, и Вниз, , чтобы перемещаться вверх и вниз по параметрам.
- Удерживая нажатой клавишу Shift , а затем используйте клавиши курсора вверх, и вниз, , чтобы увеличить или уменьшить диапазон выбранных элементов.
Пользователи клавиатуры могут выбрать несколько несмежных элементов по:
- Фокусировка на элементе
- Удерживая нажатой клавишу Ctrl , затем используйте клавиши курсора Вверх, и Вниз, , чтобы изменить параметр «сфокусированного» выбора, т.е.е. тот, который будет выбран, если вы решите это сделать. Вариант выбора «с фокусом» выделяется пунктирным контуром так же, как и ссылка с привязкой к клавиатуре.
- Нажатие Пробел для выбора / отмены выбора «сфокусированных» опций выбора.
Элемент
, как известно, сложно эффективно стилизовать с помощью CSS. Вы можете влиять на определенные аспекты, такие как любой элемент, например, манипулировать блочной моделью, отображаемым шрифтом и т. Д., И вы можете использовать свойство Appearance
, чтобы удалить системный внешний вид по умолчанию
.
Однако эти свойства не дают единообразного результата в разных браузерах, и сложно сделать такие вещи, как выравнивание элементов формы разных типов друг с другом в столбце. Внутренняя структура элемента
сложна, и ее трудно контролировать. Если вы хотите получить полный контроль, вам следует подумать об использовании библиотеки с хорошими возможностями для стилизации виджетов форм или попробовать развернуть собственное раскрывающееся меню с использованием несемантических элементов, JavaScript и WAI-ARIA для обеспечения семантики.
Для получения дополнительной информации о стилизации
см .:
Также см. Пример «Настройка выбранных стилей» ниже, где вы можете попробовать простой стиль
.
Базовый выбор
В следующем примере создается очень простое раскрывающееся меню, второй вариант которого выбран по умолчанию.
Расширенный выбор с несколькими функциями
Следующий пример более сложен и демонстрирует дополнительные функции, которые вы можете использовать в элементе
:
Вы увидите, что:
- Можно выбрать несколько параметров, потому что мы включили атрибут
multiple
. - Атрибут size вызывает одновременное отображение только 4 строк; вы можете прокрутить, чтобы просмотреть все варианты.
- Мы включили
элементов
, чтобы разделить параметры на разные группы. Это чисто визуальная группировка, ее визуализация обычно состоит из имени группы, выделенного жирным шрифтом, и отступа параметров. - Параметр «Хомяк» включает
отключенный атрибут
и поэтому не может быть выбран вообще.
Настройка стилей выбора
В этом примере показано, как можно использовать некоторые CSS и JavaScript для предоставления расширенных настраиваемых стилей для поля
.
Этот пример в основном:
- Клонирует контекст
s) в родительскую оболочку и повторно реализует стандартное ожидаемое поведение с использованием дополнительных элементов HTML и JavaScript. Это включает в себя базовое поведение вкладок для обеспечения доступности клавиатуры.
- Отображает некоторые стандартные атрибуты
с
наатрибуты данных
новых элементов для управления состоянием и CSS.
Примечание: Поддерживаются не все встроенные функции, это подтверждение концепции. ИТ начинается со стандартного HTML, но те же результаты могут быть достигнуты, начиная с данных JSON, пользовательского HTML или других решений.
HTML
<форма>
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 для анимации меню выбора в поле зрения и вне его.
Он работает путем нацеливания на скрытое поле ввода, которое ведет себя точно так же, как - поле выбора. Таким образом, вы по-прежнему можете извлекать данные из внешнего интерфейса в свои формы, потому что это решение технически не использует фактический элемент
.
Если проблема совместимости, пропустите это. Но я должен признать, что дизайн великолепен и идеально подходит для настольных компьютеров.
3. Невероятные раскрывающиеся списки HTML
Как следует из названия, этот пакет избранных меню направлен на то, чтобы просто не быть отстойным.Все они имеют разные стили и размеры с кнопками, которые вы можете щелкнуть, чтобы изменить цвет по запросу.
Очевидно, вы можете удалить эту функцию в своем собственном макете и придерживаться одной схемы, которая работает для вашего сайта. Но в целом эти избранные меню работают так же, как и обычные, и ими приятно пользоваться.
Если вы беспокоитесь о совместимости, подумайте о работе с этим шаблоном.
Большинство изменений носит косметический характер, поэтому они не должны сильно влиять на поведение пользователей.
4.Выбор заполнителя
Фактический дизайн этого меню выбора заполнителя великолепен, но дизайн здесь не единственный фактор.
Разработчик
Джеймс Ноулэнд создал это меню с целью удалить значение по умолчанию из выбора. Это означает, что он больше похож на заполнитель в текстовых полях, где вы видите его, когда поле пусто, но как только вы устанавливаете значение, оно исчезает.
Он полностью совместим и работает с фактическим элементом выбора HTML. Поле параметра по умолчанию скрывается всякий раз, когда пользователь выбирает вариант.Таким образом, вы никогда не увидите текст «выберите вариант» в раскрывающемся меню. Действительно креативное решение!
5. Плоский дизайн
Эстетика часто имеет значение в веб-дизайне, и это плоское меню выбора - отличный тому пример.
Он по-прежнему работает как обычный выбор, а раскрывающаяся часть вообще не изменилась. Но только рестайлинг самого выбора оживляет страницу. Он кажется намного более классным, чем уродливый браузер по умолчанию.
Вы даже можете взять этот шаблон и расширить его своими собственными плоскими стилями, примененными к раскрывающейся области.Абсолютно ваш звонок!
Но в качестве начального шаблона это один из самых простых вариантов для любого интерфейса.
6. Чистый CSS
Я большой поклонник чистого CSS, а не JavaScript, потому что он упрощает весь процесс проектирования. Это непросто, но существует множество решений.
Один из моих любимых - этот фрагмент, содержащий не только меню выбора на чистом CSS, но и радио и флажки.
Все они выглядят феноменально и должны гармонировать с любым типом макета.У вас есть полный контроль над внесением изменений в CSS, и, что самое главное, они должны работать во всех основных браузерах.
7. Стилизованные доступные раскрывающиеся списки
Вот один из наиболее стилизованных примеров того, что можно делать с отдельными меню. Этот фрагмент, созданный Энди Фицсимоном, использует JavaScript для раскрывающегося эффекта и использует собственный CSS для градиентов и значков стрелок.
Что приятно, это меню также поддерживает функцию no-JS, поэтому оно будет работать, даже если JavaScript отключен. Это называется постепенной деградацией, и это лучший друг веб-разработчика для доступности.
Тем не менее, в этих избранных меню используются градиенты старой школы Web 2.0, которые могут не вписаться в дизайн на 2017 год и последующие годы.
Но это показывает, что вы можете брать отдельные меню куда угодно, проявив немного творчества. И они могут сработать на удивление хорошо, если вы пройдетесь через CSS, чтобы немного их настроить.
8. Меню значков SVG
В меню выбора по умолчанию есть значок стрелки сбоку и ничего больше. Приложив немного магии SVG, вы можете превратить его в любой другой значок, который вам нравится.
Это настраиваемое меню имеет собственный дизайн значка «плюс», работающий с чистым файлом SVG. Когда вы нажимаете, чтобы развернуть меню, оно превращается в значок X для закрытия / скрытия.
Я никогда раньше не видел ничего подобного, и это показывает, насколько далеко мы продвинулись, раздвигая границы возможностей веб-браузеров.
К сожалению, этот не запускает на собственном элементе выбора HTML. Это набор элементов списка внутри div
, поэтому при выборе значения нужно будет указывать скрытое поле ввода.
К счастью, этот процесс очень прост, поэтому, если вы хотите, чтобы этот дизайн был на вашем сайте, вам не потребуется много усилий, чтобы он заработал.
9. Эксперимент в поле выбора
Вот экспериментальный образец, который действительно привлек мое внимание. Демонстрационный экран сравнения показывает, насколько он отличается от обычных меню выбора и как он влияет на взаимодействие с пользователем.
Когда вы впервые нажимаете / щелкаете, чтобы открыть меню, оно сдвигается вниз с полными анимационными эффектами. Но оно не скроется, пока вы не нажмете меню еще раз, в отличие от обычных меню выбора, которые скрываются, когда вы щелкаете где-нибудь еще на странице.
Действительно хороший пример чистого дизайна с простой анимацией. Но если вам не нравится отсутствие функции скрытия по клику, это может помешать сделке.
10. Темный и светлый выбирает
Если вы также любите чистый CSS и хотите гладкое выделение, попробуйте это решение и попробуйте использовать один из них в качестве начального шаблона.
Они оба полагаются на градиенты CSS для фона и смешивают раскрывающиеся меню с нижним цветом градиента. При этом не используются какие-либо плагины JavaScript, поэтому вы можете добиться этого с помощью небольшого количества CSS и некоторых творческих усилий.
Обратите внимание, что CSS сам по себе довольно сложен, поэтому он поможет, если вы знаете язык. Но для начала, это один из лучших вариантов, который вы найдете, и он также оставляет много места для настройки.
.
Добавить комментарий
Ваш адрес email не будет опубликован.