5 ms·

I'd settle for being able to style native selects properly

by geewee 4y ago

11235813213455 4y ago
<option> allowing html so?
- geewee 4y ago
  I'm not exactly sure what you mean?
  - kyriakos 4y ago
    <option> element doesn't allow styled HTML content as a dropdown option. This has led into hundreds of non native / js based Select Dropdown implementations to overcome this. Not a bad thing but at the same time native controls are always better and gurranteed to work everywhere especially on mobile.
- recrof 4y ago
  dropdown menus are not stylable, that's the main problem.
CM30 4y ago
Still surprised (and disappointed) how limited the styling options for native form fields are in CSS. Select fields, checkboxes, radio buttons, sliders and calendar inputs should be just as easily stylable as plain old text boxes and buttons. The fact they're not is probably hurting accessibility and usability a ton, since just about every individual and business wanting stylistic consistency is stuck reinventing the wheel with 'fake' versions or JavaScript.
- rhn_mk1 4y ago
  As an individual wanting stylistic consistency, I'd like for websites to leave my locally selected style the hell alone.
  - Tagbert 4y ago
    CSS Relativity?
  - mhuffman 4y ago
    But alas, highly paid graphic designers that are hired by executives do not like your locally selected style and insist that it does not fit with their "corporate branding".
  - marcosdumay 4y ago
    Since CSS has explicit support for your use case, then I assume you want CSS to add support for styling native widgets. Or are you trying to keep the status quo, where people hack some shit out of divs that you can't change the appearance?
    - rhn_mk1 4y ago
      If it was up to me, I'd add the ability for the browser to ignore all styling of form elements which doesn't come from the native widgets.
      - marcosdumay 4y ago
        You mean greasemonkey? I believe firefox got this natively after greasemonkey died, but I never looked how to do it.
varun_ch 4y ago
Soon™ https://open-ui.org/prototypes/selectmenu https://open-ui.org/prototypes/selectmenu
leg100 4y ago
What's the issue with bog standard selects? Is it purely aesthetics, or are there accessibility problems?
- Someone1234 4y ago
  Accessibility wise the default select/option is fine, because it does so little it is easy to reason about. Calling the problem "aesthetics" though is too narrow. There are numerous things people would like to see in a native select: - Optional search/filtering of options (without the need for an input field and JavaScript wiring). - Being able to style. - HTML in an option for example multi-line options.
c-smile 4y ago
Again, just in case... In Sciter, all input elements are ordinary styleable primitive DOM elements. <select> is there too so you can style it in the way you want: select {...} select > caption {...} select > button {...} select > popup {...} select > popup > option {...} Such composition goes even further. <option>s, for example, may have arbitrary content as also you can apply built-in DOM element controllers to DOM structure of your choice. This for example is a table that behaves as a <select type="list"> with rows-options: <table> <tbody style="behavior:select-list; overflow-y:auto;"> <tr role="option" value="A"><td><td></tr> <tr role="option" value="B"><td><td></tr> </tbody> </table>
punyearthling 4y ago
I think https://open-ui.org/ https://open-ui.org/ is trying to make this happen for a lot of unstyleable native elements.

I'd settle for being able to style native selects properly

by geewee 4y ago

I'd settle for being able to style native selects properly

11235813213455 4y ago

<option> allowing html so?

geewee 4y ago
I'm not exactly sure what you mean?
- kyriakos 4y ago
  <option> element doesn't allow styled HTML content as a dropdown option. This has led into hundreds of non native / js based Select Dropdown implementations to overcome this. Not a bad thing but at the same time native controls are always better and gurranteed to work everywhere especially on mobile.
recrof 4y ago
dropdown menus are not stylable, that's the main problem.

CM30 4y ago

Still surprised (and disappointed) how limited the styling options for native form fields are in CSS. Select fields, checkboxes, radio buttons, sliders and calendar inputs should be just as easily stylable as plain old text boxes and buttons. The fact they're not is probably hurting accessibility and usability a ton, since just about every individual and business wanting stylistic consistency is stuck reinventing the wheel with 'fake' versions or JavaScript.

rhn_mk1 4y ago
As an individual wanting stylistic consistency, I'd like for websites to leave my locally selected style the hell alone.
- Tagbert 4y ago
  CSS Relativity?
- mhuffman 4y ago
  But alas, highly paid graphic designers that are hired by executives do not like your locally selected style and insist that it does not fit with their "corporate branding".
- marcosdumay 4y ago
  Since CSS has explicit support for your use case, then I assume you want CSS to add support for styling native widgets. Or are you trying to keep the status quo, where people hack some shit out of divs that you can't change the appearance?
  - rhn_mk1 4y ago
    If it was up to me, I'd add the ability for the browser to ignore all styling of form elements which doesn't come from the native widgets.
    - marcosdumay 4y ago
      You mean greasemonkey? I believe firefox got this natively after greasemonkey died, but I never looked how to do it.

varun_ch 4y ago

Soon™ https://open-ui.org/prototypes/selectmenu https://open-ui.org/prototypes/selectmenu

leg100 4y ago

What's the issue with bog standard selects? Is it purely aesthetics, or are there accessibility problems?

Someone1234 4y ago
Accessibility wise the default select/option is fine, because it does so little it is easy to reason about. Calling the problem "aesthetics" though is too narrow. There are numerous things people would like to see in a native select: - Optional search/filtering of options (without the need for an input field and JavaScript wiring). - Being able to style. - HTML in an option for example multi-line options.

c-smile 4y ago

Again, just in case... In Sciter, all input elements are ordinary styleable primitive DOM elements. <select> is there too so you can style it in the way you want: select {...} select > caption {...} select > button {...} select > popup {...} select > popup > option {...} Such composition goes even further. <option>s, for example, may have arbitrary content as also you can apply built-in DOM element controllers to DOM structure of your choice. This for example is a table that behaves as a <select type="list"> with rows-options: <table> <tbody style="behavior:select-list; overflow-y:auto;"> <tr role="option" value="A"><td><td></tr> <tr role="option" value="B"><td><td></tr> </tbody> </table>

punyearthling 4y ago

I think https://open-ui.org/ https://open-ui.org/ is trying to make this happen for a lot of unstyleable native elements.