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

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

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

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

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

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

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

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

А зачем?

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

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

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

1. Select — контейнер для всего списка
2. Option — элемент списка

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

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

1. Select — disabled, form, multiple, name, required, size
2. 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:

1. Select — form, name, required
2. Option — disabled, label, selected, value

1. Select — disabled, multiple, size
2. 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 в помощь).

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

1. Select — disabled, size
2. Option — полностью реализовано

Select. disabled

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

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

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

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

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

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

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

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

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

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

• переключение пунктов и их взаимодействие
• состояния (checked, disabled)
• привязка к форме и отправка данных на сервер
• инициализация исходных данных (автозаполнение)
• сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)

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

что-то, выглядящее как выпадающий список, но не работающее.
Вообще. Никак.

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

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

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

• Переключение с помощью tab
• Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)
• Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)
• Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)
• Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)
• Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)

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

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

css — Как указать стиль для ?

Вопрос задан 7 лет 8 месяцев назад

Изменён 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 библиотеки либо написать что нибудь свое.

Дополнение

Я имел ввиду не конкретную библиотеку, а использование готового решения в принципе. Список таких библиотек велик. Мои любимые это:

1. Bootstrap Select
2. Chosen

Так должно работать:

option:checked { color: green; }

Зарегистрируйтесь или войдите

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

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?

спросил 11 лет, 6 месяцев назад

Изменено 4 года, 10 месяцев назад

Просмотрено 347 тысяч раз

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

Как мне стилизовать элемента с кросс-браузерной совместимостью? Я знаю много способов JavaScript, которые настраивают раскрывающийся список для преобразования в

, о чем я не спрашиваю.

 <выбрать>
    Выбрать
    Синий
    Красный
    Зеленый
    Желтый
    Коричневый

 

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

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

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

• css
• HTML-выбор

0

РЕДАКТИРОВАТЬ 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; } 

 <дел>
  Выбирать
  <ул>
    
Элемент 1
    
Элемент 2
    
Элемент 3
  
 

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

Вот вопрос, который вы задали некоторое время назад. Как создать раскрывающийся список

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

 

<голова>
<мета-кодировка="UTF-8">



<стиль>
тело {
цвет фона: серебро;
}
основной {
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
мин-высота: 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%;
}



<тело>
<основной>
<дел>
<выбрать>
Лорем.
Sequi.
Презентиум!
Дебет.
Sequi.
Презентиум!
Дебет. 

<дел>