Стандартный вид
<!-- так как 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>
2 комментария:
А можно ли в option поместить картинки например?
А в select будет выбранная картинка.