1

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?

Laura Beatris
  • 1,782
  • 7
  • 29
  • 49

4 Answers4

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>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43
  • Is there a way to just change the background of the option instead of the entire select element? Thanks! – Laura Beatris Apr 15 '20 at 15:52
  • The second snippet does what you asking for if you want to see the change then, replace with this `option { color: #444645; background: gray; }` you can see the background of that option will be changed to `gray`. – Manjuboyz Apr 15 '20 at 16:12
  • Just want to give one more information, color for `select` renders from respective Operating System so it is always a bit of trick to change its existing colors, what I have done above works for the scenario, I just hope at least it helped with the understanding. – Manjuboyz Apr 15 '20 at 16:40
2

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>
Arina Leonova
  • 21
  • 2
0

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.

JulianT
  • 36
  • 2
  • 5
-1

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>
wiisportsresorts
  • 1
  • 1
  • 1