Is there any specific reason for browsers in osx not to allow styling html option element?

DongBin Kim 0
Viewed 14

I mostly use chrome in osx and I recently discovered styling html option element not applied in any browser(chrome, firefox, safari) in osx.

// HTML
<select>
  <option class="option">Value 1</option>
  <option class="option">Value 2</option>
  <option class="option">Value 3</option>
</select>


// CSS
select {
  background-color: #fff;
  color: transparent;
}

.option {
  color: black; /* This is not applied in osx */
}

Check codepen: https://codepen.io/Dongbin/pen/PoejmeM

Then, I tried the above code in any browser in windows and it worked as I wrote.

Wonder what this is about and any particular reason in it from osx side.

macos windows css html
1 Answers

This is likely due to some choices made in the CSS2 era. Browsers were more reliant on platform UI widgets to render browser UI widgets. And these often supported less styling than CSS would want. Modern browsers are on their way to self-render all their controls. And as you observed, to varying degrees on different platforms/OS.

On the other hand, this helps keep consistency with native styles. But unfortunate for instances where one would wish more customizability. You can always use some js-library that gives you this functionality.

Kevin K Varughese0
Related