How to add color in the hover of the select option? [duplicate]

Question

How to add color in the hover of the select option? [duplicate]

Navigation

#1 by (1 votes)

1

I'm trying to change the color of the hover effect, however this only works in firefox.

Example:

option {
  filter: hue-rotate(50deg);
}

<select>
  <option>foo</option>
  <option>bar</option>
  <option>qux</option>
</select>

How can I add color in a select cross-browser option?

css

asked by anonymous 18.03.2016 / 21:07

1 answer

Verify that the 3.5 framework is installed on the machine HttpWebRequest.GetResponseAsync is limiting to 2 simultaneous calls

score 1 · Accepted Answer

I do not know a form other than hack , because this element is rendered by the operating system. You can implement your own select (with <ul> and <li ) or use one of several plugins that does this cross-browser .

A simple hack and the idea is to apply a shadow greater than the element, but turned inwards, using inset :

select option:checked {
  box-shadow: 0 0 150px #9b59b6 inset
}

<select>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
</select>

I used :checked instead of :hover because the second returns to the default appearance of the element when it loses hover. The :checked for remains as long as the option is selected / checked.

Here's a comparison:

select.hover option:hover {
  box-shadow: 0 0 150px #9b59b6 inset
}

select.checked option:checked {
  box-shadow: 0 0 150px #9b59b6 inset
}

<h2>c/hover</h2>
<select class='hover'>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
</select>

<h2>c/checked</h2>
<select class='checked'>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
  <option>lorem lorem lorem</option>
</select>