search

openui / open-ui

Maintain an open standard for UI and promote its adherence and adoption.
https://open-ui.org
Other
3.4k stars 183 forks source link

Standardise the anatomy of input[type=number] #769

Open lukewarlow opened 1 year ago

lukewarlow commented 1 year ago

<input type="number"> elements display spinners in most desktop browsers to increase/decrease the number value. These cannot be styled. There is the non-standard ::-webkit-inner-spin-button and ::-webkit-outer-spin-button, but these are limited and don't work in all browsers. Links regarding the webkit selectors:

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-outer-spin-button https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement

It would be good for Open UI to standardise this anatomy and then try to standardise it for better styleability.

See https://github.com/w3c/csswg-drafts/issues/8777

lukewarlow commented 1 year ago

This issue is mostly to bring it to this CGs attention

gregwhitworth commented 12 months ago

Thanks @lukewarlow - any interest in driving an explainer?

lukewarlow commented 12 months ago

Yeah I'm definitely interested in helping out with that I'm gonna take some time this weekend to look through the various libraries and see what they have.

lukewarlow commented 11 months ago

Research PR: https://github.com/openui/open-ui/pull/784

jyasskin commented 11 months ago

Another thought, and apologies if this is the wrong place to suggest this, or if it's achievable some other way: it would be useful to be able to set the width of the part of the input that's not the spinner (to make sure a certain number of digits fit), which implies it should be addressable somehow. As far as I can see, no browser currently makes this part of the control addressable.

github-actions[bot] commented 5 months ago

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.