Standardise the anatomy of input[type=number]

[lukewarlow]

trafficstars

<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]

This issue is mostly to bring it to this CGs attention

[gregwhitworth]

Thanks @lukewarlow - any interest in driving an explainer?

[lukewarlow]

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]

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

[jyasskin]

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]]

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.