Why is it so hard to style <select> and <option> elements?

Question

Can any browser developer, or anyone who knows why it is so difficult (if not impossible) to style the dropdown list of a <select>, there's any "real explanation" that prevents browsers treat the <select> <option> in a more convenient way.

Every time I see questions like How to modify CSS of a dropdown? in different sites that receive answers like

"It's not possible to style the dropdown list of a html select. But you can build your own dropdown list or use a framework like bootstrap."

or

"If you decide that it's absolutely a good idea to customize a dropdown, then you should use JavaScript".

And I really don't know why, I know now the <select>, I mean the container box, can be styled a little more using

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

And then giving our styles, which is not as simple as all say because we have to do some tricks to make it right, especially with the famous litter arrow.

As time passes we are neglecting such a simple and comfortable as the <select> element and almost all the developers opted to use some of the answers above and at least I still do not know why.

So at least I will be grateful if someone could help me.

Answer 1

Dropdown lists are highly dependent on the system they're running on. Just look what they look(ed) like on iOS:

The <select> element is giving you a uniform way to mark up the functionality of a list of options which can be selected. How that list is represented is entirely up to the browser, and the browser can implement it in the best possible way for the given circumstances. As such it makes no sense to try to "style" it in any way, because you cannot predict how it's going to be presented in the first place.

Usually every operating system a browser runs on has native dropdown lists, and they can look very differently on different systems. The idea is that the <select> element can use the native dropdown list style of the underlying operating system.

It's not that it's "hard" to do, it's that styling a dropdown list makes no sense given the presentation-neutral priorities the <select> element embodies. It is the lowest common denominator of what a dropdown list is across all systems, hence system-specific styling makes no sense.

Answer 2

I´ll just share here the answer I wrote yesterday after reading about selects. As it´s not the same question, I´ll not mark it as duplicated, but anyway is a little wide question to talk about.

About selects: They are not usual DOM elements, and that makes them behave different from others. It seems the browser generates them outside the DOM model, and then the events like click, or keypress on options do not work.

Also attributes like size will change their behaviour (a size bigger than 1 will make it appear as a list, not a dropdown).

Check this answer: Check if select is displaying options

As you can see, there is an example with Jquery, then you will be able to style it, or to play with it´s properties. Also there are some useful links and the explanation for them.

Hope this explanation could help to you.

Regards