Как изменить цвет фона опции выбора при наведении - PullRequest
Новая
       6

Как изменить цвет фона опции выбора при наведении

0 голосов
/ 15 апреля 2020

Я хочу изменить цвет фона параметров выбора при наведении, и я попробовал следующие правила, но они тоже не сработали: 

 select option {
    color: #fff;
  }
  select option:hover {
    color: #000;
    box-shadow: inset 20px 20px #fff;
  }

Какие правила я должен применить, чтобы добиться этого эффекта ? JS распознает ли наведение в элементе option?

Ответы [ 3 ]

2 голосов
/ 15 апреля 2020

вы можете попробовать что-то вроде этого: 

#select {
  width: 100px;
}

select:hover {
  color: #444645;
  background: green;
  /* hover on select */
}

select:focus>option:checked {
  background: yellow;
  /* selected */
}
<select id="select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Если вам нужен чит-код для списка опций, вы можете попробовать это: 

#select {
  width: 100px;
}

select:hover {
  color: #444645;
  background: green;
  /* hover on select */
}

select option {
  color: #444645;
  background: red;
  /* hover on select */
}

option:hover {
  /*optional rendered */
  background-color: teal;
}
<select onfocus='this.size=9;' onblur='this.size=0;' onchange='this.size=1; this.blur();' id="select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">Eight</option>
  <option value="9">Nine</option>
</select>
0 голосов
/ 15 апреля 2020

Элемент общеизвестно сложно продуктивно оформить с помощью CSS. Вы можете влиять на определенные аспекты, как любой элемент. (Источник: MDN ). Чтобы обеспечить единообразный внешний вид во всех браузерах, я предлагаю вам использовать такие библиотеки, как Select2 , который добавляет дополнительный div под раскрывающимся списком, по существу покрывая исходный раскрывающийся список. Таким образом, он позволяет гораздо более гибкую стилизацию, поскольку вы по сути стилизуете недавно добавленный div.

0 голосов
/ 15 апреля 2020

Используйте background или background-color, чтобы изменить цвет фона элемента. color для цвета текста, а не фона. 

div {
  background: #ffffff; /* equivalent to background-color */
}
div:hover {
  background: #000;
  color: #fff;
}
<div>Hover!</div>
...