Why can't we custom style the highlight color of the select options in HTML using CSS?

Question

I am trying to build a custom select option list using vanilla HTML and CSS.

From basic Googling, I understood those option elements are rendered by the OS, not HTML and thus cannot be custom styled.

But I could not find a good explanation of how that affects its ability to be custom styled.

Also, this is for an angular CLI project I am working on. I understand there are workarounds for this shortcoming where the select list is replaced by a ul li list. Also, there are a few angular plug-ins out there that can be used for customized dropdowns.

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  outline: none;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22px;
  background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png) 96% / 20% no-repeat;
}

select:hover {
  border: 1px solid #7d7873;
  background: url(https://i.stack.imgur.com/CE5lz.png) 96% / 20% no-repeat;
}

select:active {
  border: 1px solid #0496bb;
  background: url(https://i.stack.imgur.com/CE5lz.png) 96% / 20% no-repeat;
}

/* cannot custom style this */
option:hover {
  background: #0496bb;
}

option {
  background: yellow;
}

select::-ms-expand {
  display: none;
  /* remove default arrow on ie10 and ie11 */
}

<h2>
  Custom option hover in select list
</h2>
<select #selectTest>
  <option>Gryffindor</option>
  <option selected>Ravenclaw</option>
  <option>Hufflepuff</option>
  <option>Slytherin</option>
</select>

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. A [mcve] is generally a good start — Asons, Dec 20 '18 at 17:08
Because even in html 5.2 it's [not in the spec](https://www.w3.org/TR/html5/rendering.html#the-select-element-rendering) to adhere to css property inheritances as an element. Hence why most folks just create their own version using [elements that do](https://getbootstrap.com/docs/4.0/components/dropdowns/) to accomplish the task and allow styling options. :) — Chris W., Dec 20 '18 at 17:25
See https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-only-css?rq=1 — j08691, Dec 20 '18 at 18:09
@j08691 Thank you for the pointer. A very good resource for custom styling the select structure using CSS. It does not discuss the reason why the option element can't be custom styled though. — realIsComplex, Dec 20 '18 at 19:26
@ChrisW. It is weird that we can still change the background and the color properties but not any other; a bit annoying I'll say. Personally, I think Bootstrap dropdowns are a pain to work with. Thank you for the information. :) — realIsComplex, Dec 20 '18 at 20:27
@realIsComplex ya, I have no answers around the thinking for the separation there. The panel and typography basic properties are expected for accessibility requirements separate from the cosmetic side but the rest is left to the user agent. Luckily though, it's not too tough style up a custom alternative (especially with so many available). However ya, in future specs I'd hope to see some more flexibility to customize -- like scrollbars would be another one that would be nice. — Chris W., Dec 20 '18 at 21:21

score 1 · Accepted Answer · edited Jun 09 '19 at 17:47

For anyone who is struggling like me, I used the following npm package Angular Custom Dropdown.

There are a few npm packages out there for this. I found that other packages had a lot of over the top styling which wasn't something I was looking for. So, I ended up using the above one.

I was trying to include code snippet here but, couldn't add an angular 5 cdn link. So, I am including some screenshots of the customized drop-down I implemented:

Normal Dropdown

Normal Dropdown

DropDown Hover

DropDown Hover

DropDown Active

DropDown Active

DropDown Expanded

DropDown Expanded

DropDown Expanded option hover

DropDown Expanded option hover

Why can't we custom style the highlight color of the select options in HTML using CSS?

1 Answers1