CODEWITHSUNDEEP
javascripthtmlcssfrontend
Laura Beatris
Laura Beatris

Reputation: 1922

How to change the background color of a select option on hover

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?

Upvotes: 1

Views: 16499

Answers (4)

Arina Leonova
Arina Leonova

Reputation: 21

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>

Upvotes: 2

Manjuboyz
Manjuboyz

Reputation: 7064

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>

Upvotes: 2

JulianT
JulianT

Reputation: 36

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.

Upvotes: 0

wiisportsresorts
wiisportsresorts

Reputation: 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>

Upvotes: -1

Related Questions