How to add color in the select option’s Hover?

Asked

Viewed 1,058 times

1

I’m trying to modify the color of the effect Hover, but 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 option cross-browser?

css

  • For some css commands to be supported in some browsers, you have to use web-kit for Chrome and safari, o opera, ms for IE and moz for firefox

  • 1

    The <option> generated by HTML is not a normal DOM element as I explained in this question How to force <option> elements to appear below <select> in IE?, I know the questions are different, but the answer there explains why this doesn’t work and gives an alternative called dropkick that should help you.

  • 1

    @Guilhermenascimento I will read, Thank you!

1 answer

1


I don’t know a way that isn’t hack, even 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 so cross-browser.

A simple hack and the idea is to apply a shadow larger than the element, but turned inside, 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 one looks again default element when you lose Hover. The :checked by remains while the option is selected/checked.

Here’s a comparative:

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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.