Что я хотел бы сделать, так это то, что раскрывающийся список, который выходит из a, select
который в данном случае будет набором options
, имеет другой цвет фона, и когда он передается по нему, он изменяет свой оттенок.
CSS-код:
select option {
color:Red;
}
Я уже применил выше, но я загружаю страницу, и она не отмечает никаких изменений, буква по-прежнему черная. Дизайн может быть применен к другим, clases
кроме случаев, когда вы пытаетесь сделать варианты.
Выберите общий код (css):
select {
/* styling */
background-color: white;
border: thin solid blue;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
/* reset */
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
Наверняка проблема в том, что цвет текста в
select
(а не вoption
) по-прежнему черный.Решение:
Укажите
color
дляselect
.Пример:
Если я не ошибаюсь, это не то, что можно сделать прямо сейчас.
В стандарте ничего не указано о стилях
option
и именно браузеры представляют их так, как хотят; поэтому, даже если вы найдете способ, он, вероятно, не будет работать во всех браузерах.Некоторые уважают атрибуты and
color
,background-color
но это не всегда так: Chrome и IE учитывают, Firefox — нет (хотя это может быть ошибкой, как указывает Маркос Галлардо в комментарии ), и только IE/Edge учитывают стили атрибутов:hover
. Таким образом, следующий код будет выглядеть по-разному в каждом браузере:И цветную полосу при наведении
option
, о которой я знаю, нельзя стилизовать (в некоторых случаях ее даже не существует, например, в iOS, где выпадающие списки представляют собой «вертушки»).Чтобы стилизовать a
select
, вы могли бы использоватьul
/li
и имитировать раскрывающийся список. Некоторые фреймворки, такие как Bootstrap , имеют выпадающие меню, созданные таким образом, и вы можете легко изменить их стиль.