Stack Overflow
Stack Overflow

Why is it so hard to style `. If you want to eschew that convenience and reimplement your own style of dropdown list and take on the responsibility of ensuring it works everywhere, you can go ahead and do your own HTML-Javascript implementation. It makes little sense to "override" aspects of the default presentation when there really is **no default presentation**. – deceze Jun 10 '15 at 07:55

  • The default presentation is consistent: a group of related options of which one can be selected. This is not about overriding functional, but presentational aspects- so the fact the ability to do so is obtuse is not an argument for its necessity. If it was, the spec for `select` would clearly state this. The same argument exists for the right for any given OS to be able to determine what is best for the user, the OS has no idea about the context the control is being used in, less so above the developer implementing it- so the idea OS knows best, is not entirely correct. – SW4 Jun 10 '15 at 08:01
  • 1
    @SW4 Exactly, ` – deceze Jun 10 '15 at 08:05
  • 1
    @SW4 It's hard enough to do system specific customisations of default HTML elements when their default appearance and behaviour is defined and pretty consistent. It's simply impractical if the default presentation is nowhere near consistent across platforms. – deceze Jun 10 '15 at 08:08
  • 1
    @SW4: http://www.w3.org/TR/CSS21/sample.html (non-normative) http://www.w3.org/TR/html5/rendering.html#form-controls http://www.w3.org/TR/html5/rendering.html#bindings (bindings are non-normative) There is no normative text that specifies that a form control must, or must not, be rendered according to the CSS visual formatting model. But HTML5 in particular notes that UAs *should* render them according to platform-specific expectations for the sake of consistency with the platform UI. – BoltClock Jun 10 '15 at 08:14
  • You are right about the no default presentation and the consistency, but why not at least let me reference to the elements and stylize them, I'll take my chances, anyway I always have more than 5 browsers open and with more than one version, I have to make sure the – Yandy_Viera Jun 10 '15 at 08:26
  • @Yand Again, the specification specifically stays out of it because there is no way to make a universally applicable standard. Some browsers allow you to apply *some* customisations using vendor-specific prefixes, but why that may or may not encompass all aspects of the element is up to each vendor to decide. If they are using native dropdown lists, perhaps the underlying implementation is simply not customisable in certain ways. Perhaps it's too brittle. Perhaps it's simply not worth maintaining that API since customisations make little sense to begin with and are rarely used. – deceze Jun 10 '15 at 08:33
  • 1
    @YandY Viera: How would you *expect* the browser to apply styles? Say you have `select { background: red } option { background: yellow }` - what would you expect that to look like on iOS? What if iOS styles them differently from how you expect? – BoltClock Jun 10 '15 at 08:33
  • 1
    @BoltClock: I can be making a mistake, but I see no difference between a dropdown and a simple button, always than both can be treated in the same way, what you're saying applies also to the button, and not for that we can't set styles to the button – Yandy_Viera Jun 10 '15 at 08:52
  • 1
    That is based on an assumption that "the select element represents the button part of a dropdown menu", which is flawed for the reasons deceze has explained above. One example of a vendor prefix for targeting the button of a dropdown menu in a platform such as Windows is IE's `select::-ms-expand` pseudo-element. As you can see, IE makes use of a pseudo-element to target the button, which means the select element represents something else entirely. – BoltClock Jun 10 '15 at 08:59
    • 0

    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

    Community
    • 1
    • 1
    Alejandro Teixeira Muñoz
    • 2,758
    • 1
    • 22
    • 31