How to Style HTML Select Option Hover and Selected Option Effects

How to style HTML select option hover and selected option effects

You can't do this, if you want you can use jQuery Chosen or similar http://harvesthq.github.io/chosen/

It generates HTML lists easy to style.

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

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>

Can you change the background color of a select option on :hover in Microsoft Edge?

The <option> elements are rendered by your OS and only a few style attributes that can be applied to it. For the detailed information, you can refer to this thread.

As you say if the select is set to multiple, the hoverover works, we can use the way that changing the <select> to multiple when we select as a workaround. You can refer to the following sample:

option:hover {
  background-color: yellow;
}

<select name="cars" id="cars" onfocus='this.size=4;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Styling an option on a select field - hover

You can not style option as its browser specific feature. So better make a custom select dropdown using div. there you can give colors.

Select multiple Option - Color property won't works for :hover, :focus, :active, :checked selectors

You are overriding the color attribute on the option elements itself. Therefore on hover it doesn't change. Instead of defining color: white on every single option element (which is bad practice anyways), you could assign that color to all option elements in your css file.

Perhaps if that really doesn't fit your use case, for example when color isn't always white, you could try using the !important keyword:

select option:hover, option:focus, option:active, option:checked {
    
    font-size: 16px; /* working good */
    text-decoration: underline; /* working good */
    
    background: linear-gradient(gray,gray); /* working good */

    color: red !important;
}

How to style the option of an html "select" element?

There are only a few style attributes that can be applied to an <option> element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

How to Style HTML Select Option Hover and Selected Option Effects