Trying to change the option background color on hover in drop down select in CSS

Question

I'm trying to change the background color on hover in select, I tried many ways and It wont change.Really appreciate If you can help,

.selector {

  background-color: #252525;
  color: #fff;
  border: none;
  border: 1px solid #595E57;
  padding: 5px;
  width: 150px;
}

.selector option:hover{

  background-color: #1BA1E2 !important;
}

<select name=""  class="selector">
             <option value="">Select</option>
             <option value="">Select</option>
</select>

What's the problem? The options are coloured to `#1BA1E2` when hovered upon, which is what the CSS indicates. What are you trying to accomplish? — Martin, Jul 20 '21 at 07:38
@Martin It should be in blue color cause #1BA1E2 is light blue color, It showing gray. — Mishen Thakshana, Jul 20 '21 at 07:40
@destr0id It's blue for me also. What browser are you using? — Martin, Jul 20 '21 at 07:42
@destr0id If I run the snippet above, it shows blue. I'm on FF too. — Martin, Jul 20 '21 at 07:43
@destr0id It's not showing like that for at least two of us. — Martin, Jul 20 '21 at 07:44
@Martin I have cleared the cache and tried on icognito tab too — Mishen Thakshana, Jul 20 '21 at 07:45
See this for how it appears to me: https://imgur.com/a/oArolLY — Martin, Jul 20 '21 at 07:46
May be that is a glitch of firefox, because I also used firefox and that giltched soo much that I switched to brave, try viewing from any other browser — Parvat . R, Jul 20 '21 at 07:46
Possible duplicate [Change Select List Option background colour on hover](https://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) — A.Baudouin, Jul 20 '21 at 07:47

score 1 · Answer 1 · answered Jul 20 '21 at 07:51

Form elements are rendered by the OS and not the browser, so the CSS isn't always (or even 'is rarely') applied. There are ways to change the highlight color in Firefox, by adding a box-shadow to the CSS for option:hover, but this is browser-specific.

Try something like box-shadow: 0 0 10px 10px #1BA1E2 inset;

At the end it's not worth it. Think on mobile first. On iOS the options will be rendered in a very own way anyway. There are no colors.

Even this is not working :(, Problem with windows 11? – Mishen Thakshana Jul 20 '21 at 07:56 — Mishen Thakshana, Jul 20 '21 at 07:56

Ahmad · Accepted Answer · 2021-07-20T08:14:28.360

.selector {

  background-color: #252525;
  color: #fff;
  border: none;
  border: 1px solid #595E57;
  padding: 5px;
  width: 150px;
  overflow:hidden;
}
.selector option{
padding:5px;
}
.selector option:hover{
  background-color: #1BA1E2 !important;
}

<select onfocus='this.size=10;' onchange='this.size=1; this.blur();' name=""  class="selector">
             <option value="">Select1</option>
             <option value="">Select2</option>
             <option value="">Select3</option>
             <option value="">Select4</option>
</select>

Trying to change the option background color on hover in drop down select in CSS

2 Answers2