Csswg-drafts: [css-forms] <select/> field pseudoelements

[Nadya678]

Please add for <select/> pseudoelements:

select::dropdown-arrow - it will selects an arrow down area. I think, the element can have styles: position, background-image, background-color, border, padding, height, width, box-sizing etc. Probably also float.

select::dropdown-list - it will selects list if is it is dropped. I think, the element can have styles: position, box-shadow, border, background, padding, height, width, box-sizing.

implementation of standard styles for <option/> and <optgroup/> including height, width, margin, padding. There is also needed pseudo-class for selected state of option.

Reason: for the moment there is no option to fully style the select field without replacement of it with radio input elements.

[frivoal]

If we want to specify this, pseudo-elements for parts of replaced elements / form elements should probably go into its own spec.

The other part is that this is tricky: what these elements look like is expected to vary per platform and/or per browser. There's not guarantee that there will be a dropdown arrow.

Styling of form controls in general is known to be an area where we need to do something, but what we can do is not clear at all. https://drafts.csswg.org/css-forms/ was started to start explore this, but it has not been worked on actively.

[Nadya678]

I think, the look of <select/> should be standardized. I saw one example in W3C specification (I cannot recall which). The <select/> was drawn like "old windows" style COMBOBOX with arrow. I think, if this element have not arrow in any browser, there should be bossibility to add it. The ::dropdown-list is present in all browsers with GUI. I want have possibility to set option height to 40px to make the element easy tappable. I also want to style it to look like part of created website.

Many people has problem with it. Please read about horrible hacks on stackoverflow. What if the arrow will be in left corner of the select? It will not cut by parent overflow:hidden setting.

I also open topic for <datalist/>. The same problem. But.... In definition <datalist/> IS NOT replaced element. The same problem - cannot style look of the dropdown.

The people that want ot have a site, they cannot grasp, the <select/> is replaced element. They say: "the element is part of my website. This must look like in my graphic project. Make something with it". Then I must make "horrible hacks" with series of radiobuttons and labels and tons of CSS for them...

It is high time to standardize look of controls and define pseudoelements. Why we want to style buildin video player (also replaced element - time-related selectors) but not <select/>?

BTW. More problem is to REMOVE the ::dropdown-arrow. If you want to add it, you can use any svg as background. Big problem is also write styles for select>option element (change of element size, maximum height, colors, borders...).

Here is DOM-like tree for proposed <select/> pseudoelements:

original HTML:

<select>
    <optgroup>
      <option>1</option>
      <option>2</option>
   </optgroup>
   <option>3</option>
</select>

Translated in browser to show parts of element:

<select><::dropdown-arrow/>
   <::dropdown-list>
      <optgroup>
         <option>1</option>
         <option>2</option>
      </optgroup>
      <option>3</option>
   </::dropdown-list>
</select>

[keithjgrant]

Huge +1 to this.

It’s a huge accessibility need. Designers & developers want to stylize their apps, but do that with select boxes, they must rely on JS libs to hide the <select> and replace it with a bunch of styled divs, inevitably missing some a11y affordances.

[a2sheppy]

There's the opposite side of the issue -- sites or apps that are trying to (or would prefer to, or their users would prefer to) adhere to the look and feel of native apps. If the spec dictates the look and feel of UI elements, things become very complicated for those developers.

[apollolux]

Web development in 2019 :) I find myself looking to style optgroup (or at least only the label without affecting the whole group itself) and option for a project and have quickly come up to the limitations of what CSS properties actually apply to them (in particular, for optgroup background-color works but background-image doesn't and therefore neither do the other related background props). Please expand what CSS properties can apply to <select> and its related elements so we won't have to resort to super-custom semi-semantic solutions like the jQuery-based Select2 !