Стилизация Select-Option (почти) без JavaScript / Хабр
Стилизация некоторых стандартных элементов — довольно нетривиальная задача.Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.
Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.
Для стилизации остального — есть JavaScript.
Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.
На днях у меня, как это часто и бывает, возникла необходимость стилизовать выпадающий список. Однако именно выпадающим списком он становился только в мобильной версии, до этого же он вёл себя как самая обычная группа радиокнопок.
И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:
А зачем?
Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т. д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.
Небольшой ликбез:
Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.
Выпадающие списки состоят из 2 основных элементов:
- Select — контейнер для всего списка
- Option — элемент списка
Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.
Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):
- Select — disabled, form, multiple, name, required, size
Уже было написано немало слов, поэтому — ближе к коду:
<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 — полностью реализовано
Чтобы реализовать пункт 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>
Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).
Что осталось?
- Select — disabled, size
- Option — полностью реализовано
- 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, и только они)
css — Как указать стиль для ?
Вопрос задан
Изменён 7 лет 8 месяцев назад
Просмотрен 16k раз
Как в CSS указать стиль для <option selected>
? Возможно ли это без использования JS?
<select> <option value="t1">Чебурашка</option> <option selected value="t2">Крыса Лариса</option> </select>
Возможно. CSS2 позволяет делать выборку по атрибутам тегов. Для того чтобы указать на наличие атрибута используется селектор вида tag[attribute]
.
Ваш код может выглядеть так:
option[selected] { background-color: red; font-weight: bold; text-decoration: underline; }
JSFiddle.
Дополнение:
Кроссбраузерная стилизация select
‘ов является достаточно сложной задачей. В большинстве случае имеет смысл использовать специальные JavaScript библиотеки, которые фактически заменяют select
на набор div
‘ов. Таких библиотек очень много. Например, Chosen.
У выпадающих списков ограниченные возможности по стилизации + на каждой платформе они имеют свой внешний вид. Рекомендую либо использовать JS библиотеки либо написать что нибудь свое.
Дополнение
Я имел ввиду не конкретную библиотеку, а использование готового решения в принципе. Список таких библиотек велик. Мои любимые это:
- Bootstrap Select
- Chosen
Так должно работать:
option:checked { color: green; }6
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
html select — Как стилизовать только с помощью CSS?
спросил
Изменено 4 года, 10 месяцев назад
Просмотрено 347 тысяч раз
Примечание. Этот вопрос не о создании пользовательского раскрывающегося списка. Речь идет только о возможностях стилизации
элементов в элементе select в CSS Как мне стилизовать элемента
с кросс-браузерной совместимостью? Я знаю много способов JavaScript, которые настраивают раскрывающийся список для преобразования в
, о чем я не спрашиваю.
<выбрать>
Я спрашиваю, что возможно только с CSS, с совместимостью с IE9+, Firefox и Chrome.
Я хочу, чтобы стиль был таким или как можно ближе.
Я пробовал здесь http://jsfiddle.net/jitendravyas/juwz3/3/, но Chrome не показывает никаких стилей, кроме цвета шрифта, а Firefox показывает больше. Как заставить границы и отступы работать и в Chrome?
- css
- HTML-выбор
РЕДАКТИРОВАТЬ 2015 Май
Отказ от ответственности: я взял фрагмент из ответа, указанного ниже:
Важное обновление!
В дополнение к WebKit, начиная с Firefox 35 , мы сможем использовать свойство «внешний вид
»:
Использование
-moz-appearance
со значениемnone
в поле со списком теперь удаляет кнопка раскрывающегося списка
Итак, теперь, чтобы скрыть стиль по умолчанию, достаточно добавить следующие правила к нашему элементу select:
выбрать { -webkit-внешний вид: нет; -моз-внешний вид: нет; внешний вид: нет; }
Для поддержки IE 11 вы можете использовать [ ::-ms-expand
][15].
select::-ms-expand { /* для IE 11 */ дисплей: нет; }
Старый ответ
К сожалению, то, что вы просите, невозможно с использованием чистого CSS. Однако вот что-то похожее, что вы можете выбрать в качестве обходного пути. Проверьте живой код ниже.
раздел { поле: 10 пикселей; отступ: 10 пикселей; граница: 2 пикселя сплошного фиолетового цвета; ширина: 200 пикселей; -webkit-border-radius: 5px; -moz-border-radius: 5px; радиус границы: 5px; } div > ul { display: none; } div: hover > ul {display: block; фон: #f9ф9f9; граница-верх: 1px сплошной фиолетовый;} div: hover > ul > li { padding: 5px; нижняя граница: 1px сплошная #4f4f4f;} div: hover > ul > li: hover {фон: белый;} div: hover > ul > li: hover > a { color: red; }
<дел> Выбирать <ул>
РЕДАКТИРОВАТЬ
Вот вопрос, который вы задали некоторое время назад. Как создать раскрывающийся список
4Не существует кросс-браузерного способа стилизации элементов параметров, во всяком случае, не в той мере, в какой вы видите второй снимок экрана. Возможно, вы сможете выделить их жирным шрифтом и установить размер шрифта, но на этом все…
Раньше я экспериментировал с элементами выбора, и без переопределения функциональности с помощью JavaScript, я не думаю, что это возможно в Chrome. Используете ли вы плагин или пишете свой собственный код, только CSS не годится для Chrome/Safari, и, как вы сказали, Firefox лучше справляется с этим.
0Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя электронную почту и парольОпубликовать как гость
Электронная почтаТребуется, но не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.
CSS: Настройка элементов SELECT и OPTION0130 Как настроить внешний вид HTML-элементов select и option.
Закрыто:
Открыто:
Это проще, чем писать собственный выпадающий список.
Этот код совместим со всеми браузерами, включая IE, но форматирование лучше всего выглядит в Chrome и Firefox.
<голова> <мета-кодировка="UTF-8">Пользовательские списки SELECT/OPTION <стиль> тело { цвет фона: серебро; } основной { дисплей: гибкий; выравнивание содержимого: по центру; выравнивание элементов: по центру; мин-высота: 100вх; } .выбрать выбрать, .выберите опцию { граница: нет; контур: нет; размер шрифта: 18 пикселей; отступ: 5px 55px 5px 5px; фоновый цвет: сланцево-серый; белый цвет; -webkit-внешний вид: нет; /* для Сафари */ маржа: 0; радиус границы: 0; } . выбирать { положение: родственник; отображение: встроенный блок; } .выбрать .стрелка { положение: абсолютное; высота: 100%; ширина: 25 пикселей; сверху: 0; справа: 0; фоновый цвет: тусклый серый; события-указатели: нет; } .выбрать выбрать:фокус + .стрелка, .выбрать выбрать: наведение + .стрелка{ цвет фона: dodgerblue; } .выбрать .arrow::до, .выбрать .стрелка::после { содержание: ""; положение: абсолютное; ширина: 0; высота: 0; стиль границы: сплошной; слева: 5 пикселей; } .выбрать .стрелка::до { цвет границы: прозрачный прозрачный белый прозрачный; ширина границы: 0 8px 8px 8px; верх: 20%; } .выбрать .стрелка::после { цвет границы: белый прозрачный прозрачный прозрачный; ширина границы: 8px 8px 0 8px; низ: 20%; } <тело> <основной> <дел> <выбрать> <дел>
Видео по кодированию
учебник
CSS: добавление обводки к тексту — как обвести текст
Как обвести текст, добавив обводку, используя только CSS; совместим со всеми браузерами, включая IE11.
CSS: автоматическое скрытие разделов страницы
Автоматическое скрытие разделов страницы для максимального увеличения места на странице; использует только HTML и CSS.
CSS: базовая контактная форма
Создайте отзывчивую, красивую базовую контактную форму, используя только HTML и CSS.
CSS: Фоновый генератор кода в режиме боке
Только HTML и CSS.
CSS: Box Shadow
Все о свойстве box-shadow.
CSS: выбор карты меняет фон
Изменение фона при выборе карты с использованием только HTML и CSS.
CSS: Карусель
Анимированное, отзывчивое меню карусели/героя/ползунка с использованием только HTML и CSS.
CSS: центрирование элементов на странице
Как центрировать элементы по вертикали и по горизонтали на странице.
CSS: Рождественский фон с эффектом боке
Фон с эффектом боке в рождественской тематике.
CSS: создание облачка/выноски
Пример всплывающего речевого выноски или выноски.
CSS: Пользовательские флажки и переключатели
Создавайте настраиваемые флажки и переключатели, используя только HTML и CSS.
CSS: Пользовательские раскрывающиеся списки
Стильные раскрывающиеся списки, использующие только HTML и CSS.
CSS: настройка полос прокрутки в Chrome, Edge и Firefox
Используйте только CSS для настройки полос прокрутки.
CSS: настройка элементов SELECT и OPTION
Как настроить внешний вид HTML-элементов select и option.
CSS: контактная форма в темном режиме
Создайте адаптивную контактную форму в темном режиме, используя только HTML и CSS.
CSS: форма входа и регистрации в темном режиме или страница
Комбинация формы входа и регистрации в темном режиме в одной, использующей только HTML и CSS.
CSS: Обнаружение темного режима
Использование запроса CSS @media для определения того, использует ли пользователь тему темного режима.
CSS: расширяющаяся панель поиска
Только HTML и CSS.
CSS: запросы функций
Используйте @supports, чтобы узнать, какие функции CSS поддерживаются.
CSS: Форма пятизвездочного рейтинга
Пример формы пятизвездочного рейтинга с использованием только HTML и CSS.
CSS: Целевая страница веб-сайта на основе флип-карт
Адаптивная целевая страница веб-сайта с флип-картами, использующая только HTML и CSS.
CSS: форматирование изображений с различными соотношениями сторон
Форматирование изображений с различными соотношениями сторон для соответствия одному и тому же соотношению сторон без растягивания.
CSS: система меню Hero или Banner
Отличный способ организации больших меню.
CSS: карточки с горизонтальной прокруткой и функцией привязки
Создавайте карточки с горизонтальной прокруткой и функцией привязки.
CSS: Портфолио изображений
Создайте портфолио изображений, чтобы демонстрировать изображения, используя только HTML и CSS.
CSS: Целевая страница с меню
Большое меню, которое выдвигается сбоку, а затем сверху.
CSS: большое выпадающее меню
Большое адаптивное выпадающее меню для сайтов с большим количеством пунктов меню.
CSS: Загрузка страницы — артемия
Создайте абстрактную артемию, плавающую во время загрузки страницы.
CSS: страница загрузки — сборщик данных
Создайте абстрактную сеть, которая собирает данные по мере их анимации.
CSS: Загрузка страницы — дюймовый червь
Создайте абстрактного дюймового червя, который перемещается по мере загрузки страницы.
CSS: Загрузка страницы — Лазерное освещение
Создайте нервное световое шоу во время загрузки страницы.
CSS: загрузка страницы — синусоида
Синусоида для просмотра при загрузке страницы.
CSS: освоение строк и столбцов Bootstrap
Как работают строки и столбцы.
CSS: меню с подменю
Система меню, которая имеет подменю за подменю.
CSS: Мобильное меню навигации
Ориентированное на мобильные устройства меню навигации с использованием только HTML и CSS.
CSS: Мобильный веб-сайт для начинающих
Только HTML и CSS.
CSS: имитация формы Google
Только HTML и CSS.
CSS: страница поворачивается по оси Y для отображения меню
3D-анимированная, адаптивная страница с вращением по оси Y показывает меню, используя только HTML и CSS.
CSS: страница с приподнятыми углами
Плоский лист бумаги с приподнятыми, очищенными или загнутыми углами в нескольких версиях для различных сценариев.
CSS: Нижний колонтитул с эффектом параллакса
Нижний колонтитул веб-страницы с эффектом параллакса.
CSS: Эффект параллакса Целевая страница
Только HTML и CSS.
CSS: размещение нижнего колонтитула страницы внизу
Как расположить нижний колонтитул страницы внизу для всех браузеров, включая IE6.
CSS: Радужный линейный градиент
Эффект радуги для фона.
CSS: Удаление пробелов между изображениями
Несколько вариантов удаления пробелов между изображениями.
CSS: Адаптивные карточки аватаров
Интересный способ организации данных в ограниченном пространстве; использует только HTML и CSS.
CSS: одностраничный веб-сайт
Только HTML и CSS.
CSS: красивое, простое меню панели навигации
Только HTML и CSS.
CSS: слайд при прокрутке
Только HTML и CSS.
CSS: Наклонная страница показывает меню
Анимированная, адаптивная, наклонная страница веб-сайта показывает меню, используя только HTML и CSS.
CSS: кнопки переключения
Используйте флажки и переключатели для создания кнопок-переключателей, как на Apple iPhone.