I want to change the background color of the select options on hover and i have tried the followed rules but it didn't worked either:

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

What rules i have to apply to achieve that effect? Does JS recognize a hover in a option element?

I want to change the background color of the select options on hover and i have tried the followed rules but it didn't worked either:

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

What rules i have to apply to achieve that effect? Does JS recognize a hover in a option element?

• javascript
• html
• css
• frontend

Share Improve this question Follow asked Apr 15, 2020 at 15:15 Laura BeatrisLaura Beatris 1,93299 gold badges3131 silver badges5757 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

you can try something like this:

#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>

If you need a cheat code for the options list then you can try this:

#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>

Unfortunately, you can't just change default background color and text color of a selected option by just css. They're maganed by your browser, and some of them don't want to keep your css style.

That's why you always see that default ugly blue background and always white text.

BUT I have a hack here:

For changing the backround color you can use linear-gradient with same color like this:

option:hover,
option:checked,
option:active,
option:focus {
    background: linear-gradient(#ffffd4, #ffffd4);
    position: relative;    
}

For changing text color you can use pseudo-class with content which is equal to your option text, like this:

select:focus > option:checked:before {
    color: #101010;
    position: absolute;
    content: attr(data-content);
}

data-content can be added directly in html or via javascript/jQuery.

<option data-content="One">One</option>

You need position absolute to hide your option text under the pseudo class.

option:hover,
option:checked,
option:active,
option:focus {
    background: linear-gradient(#ffffd4, #ffffd4);
    position: relative;
}

select:focus > option:checked:before {
    color: #A52A2A;
    position: absolute;
    content: attr(data-content);
}

select {
    width: 200px;
}

option {
    padding: 5px 10px;
}

option:hover {
    cursor: pointer;
}

<select size=5>
   <option data-content="One">One</option>
   <option data-content="Two">Two</option>
   <option data-content="Three">Three</option>
   <option data-content="Four">Four</option>
   <option data-content="Five">Five</option>
</select>

The element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element. (Source: MDN). To produce a consistent appearance across all browsers, I suggest that you use libraries like Select2, which appends an additional div below the dropdown, essentially covering the original dropdown. This way, it allows a much more flexible styling since you're essentially styling the newly appended div.

Use background or background-color to change the background color of an element. color is for text color, not background color.

div {
  background: #ffffff; /* equivalent to background-color */
}
div:hover {
  background: #000;
  color: #fff;
}

<div>Hover!</div>