<select> и <option> | CSS

Стандартный вид

<!-- так как IE не поддерживает атрибут hidden, для него были добавлены disabled и selected -->
<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка</option>
</select>

Далее полигон для испытаний (в течении месяца после написания статьи перестало работать то, что раньше работало в Mozilla Firefox).

Стили, применяемые к <select>

<style>
select { /* чаще поддерживаются 
  font-size: 120%;
  width: 100%;
}
</style>

Убрать у <select> стрелку

<style>
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
select::-ms-expand {  /* для IE */ 
    display: none;
}
</style>

Псевдоэлементы (::before, ::after и др.) у <select>

<style>
select::after { /* чаще не поддерживаются 
  content: " after";
}
</style>

Стили, применяемые к <option>

<style>
option:nth-child(3)::after {
  content: " " url(http://www.blogger.com/img/icon_28_followers.png);
  vertical-align: middle;
}
</style>
<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>
<style>
option:nth-child(3)::after {
  content: " " url(http://www.blogger.com/img/icon_28_followers.png);
  vertical-align: middle;
}
</style>
<select size="2">
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

Стиль выбранного пункта

<style>
option:checked {
  background: olive linear-gradient(olive, olive);
  color: blue;
}
</style>
<select>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

Стиль hover-пункта, на который наведен курсор мыши

<style>
option:hover {
  background: olive linear-gradient(olive, olive);
  color: blue;
}
</style>
<select>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

Разный стиль у <select> и <option>

<style>
select:invalid:not(:focus) {
  color: gray;
}
select:invalid:focus {
  color: transparent;
}
select:focus option {
  color: initial;
}
</style>
<select required>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка</option>
</select>

Изображения в <option>

Тег <img> не поддерживается, так как его нельзя вставить в атрибут <label>

<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка <img alt="Иконка группы человек" src="http://www.blogger.com/img/icon_28_followers.png" height="28" width="28"></option>
</select>

Свойство background-image для <option>

<style>
option {
  padding: 6px 28px 6px 0;
}
option:nth-child(3) {
  background: url(http://www.blogger.com/img/icon_28_followers.png) 100% 50% no-repeat;
}
</style>
<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>
<style>
option {
  padding: 6px 28px 6px 0;
}
option:nth-child(2) {
  background: url(http://www.blogger.com/img/icon_28_followers.png) 100% 50% no-repeat;
}
</style>
<select size="2">
    <option>Яблоко</option>
    <option>Груша</option>
    <option>Мандарин</option>
    <option>Апельсин</option>
    <option>Лимон</option>
    <option>Абрикос</option>
    <option>Персик</option>
</select>

Вместо картинок можно использовать символы emoji или подключить файл со своим шрифтом, подменяющим символы на рисунки

<select>
    <option value="" hidden disabled selected>Выбрать</option>
    <option>Мальчик</option>
    <option>Девочка ❤️‍</option>
</select>
в f t
наверх ↑

2 комментария:

Анонимный
Классно! Очень пригодилось!
А можно ли в option поместить картинки например?
А в select будет выбранная картинка.
NMitra
Можно с помощью своих шрифтов благодаря свойству @font-face или использовать стандартные символы-картинки emoji http://shpargalkablog.ru/2016/08/select-option-css.html#img