[css-forms-1] Allow styling of input[type=number] number spinner

[samhed]

<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

We'd like to see the possibility to change the appearance of the spinner, providing different buttons icons and hover/active styles.

[samhed]

See also: #7226

[josepharhar]

The new css-forms spec should enable this with some new pseudo elements: https://drafts.csswg.org/css-forms-1/#number-pseudos

[css-meeting-bot]

The CSS Working Group just discussed [css-forms-1] Allow styling of input[type=number] number spinner, and agreed to the following:

• RESOLVED: Accept the 3 pseudos that are currently in the spec

The full IRC log of that discussion

<zcorpan> ntim: Want to sign-off what's in the spec
<zcorpan> ntim: Addition of step-up and step-down
<zcorpan> ntim: step-control is a wrapper
<zcorpan> astearns: Adding those details to the issue, to see if the commenter is satisfied, might be a good idea
<emilio> q+
<zcorpan> ack emilio
<astearns> ack emilio
<zcorpan> emilio: There's implicit, two things there. One, appearance: textfield must not generate those
<zcorpan> emilio: is that interoperable today?
<zcorpan> ntim: It's not the current behavior in webkit
<zcorpan> emilio
<zcorpan> emilio: OK, we probably need to keep that for compat. We don't expose the pseudos
<zcorpan> emilio: The other thing is mobile browsers don't generate these by default
<zcorpan> emilio: Should that be encoded in the UA stylesheet? Allowed by teh spec?
<zcorpan> ntim: I don't know
<zcorpan> ntim: The styles need to be consistent for appearance: base. Haven't thought so much about other appearance
<zcorpan> emilio: the spec presumes that order works. Should specify the base styles?
<zcorpan> ntim: yes, base appearance should use flexbox
<zcorpan> emilio: example uses (MISSED) on the container
<astearns> s/(MISSED)/display:contents/
<zcorpan> ntim: display: block
<zcorpan> emilio: seems weird. Gecko uses flexbox
<zcorpan> ntim: could make sense
<zcorpan> emilio: should add more details to the spec, how they are styled and what we want to allow. Remove the spinners on mobile
<zcorpan> emilio: OK with exposing these three
<zcorpan> ntim: Good points. Should do more analysis on the default style
<zcorpan> astearns: Are we taking a resolution? Apart from adding more details
<zcorpan> ntim: I was hoping we could resolve on having 3 pseudos
<zcorpan> astearns: So what's already in the spec
<zcorpan> astearns: Any other comments?
<zcorpan> Proposed resolution: Accept the 3 pseudos that are currently in the spec
<jarhar> +1
<zcorpan> RESOLVED: Accept the 3 pseudos that are currently in the spec
<jarhar> https://github.com//issues/12510