1786154 - Consider hiding number-type input's spinners when appearance:none is set

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Thomas Wisniewski [:twisniewski]]

Inputs with type number continue to show their default up/down arrow UI even when appearance:none or its webkit/moz prefixes is applied to the element with CSS. This can lead to constrained designs like the one on aastocks to be too cramped, leading to webcompat reports. This used to work, and I'm not sure if it stopped working by choice or by mistake.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

So I guess test-case is data:text/html,<input type=number style="appearance: none">? Are you sure this used to work? Related code hasn't really changed all that much since bug 947728.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

I see spinners all the way back to at lest FF78 using data:text/html,<input type=number style="appearance: none">, fwiw.

Comment 3

[Thomas Wisniewski [:twisniewski]]

Right, I think I mis-remembered the precise CSS which sites used; I think it was actually -moz-appearance:textfield, as per the comments here: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

That said, as per those sites, it's a common trick to hide the spinners with appearance, but there are webkit-specific pseudoselectors involved (bug 1355574). Having at least one of those methods work on Firefox would help with webcompat, and since moz-appearance is gone maybe we ought to fix that bug instead? (I can't imagine many sites would use appearance as well as (or instead of) moz-appearance).

Comment 4

[Jonathan Kew [:jfkthame]]

Seems like a legitimate issue that there should be a way for authors to hide the spinners, though it may be unclear exactly what the solution should be.

FWIW, I see the spinner arrows in Safari, and also in Chrome when the input is hovered. Does this need spec discussion somewhere?

Comment 5

[Emilio Cobos Álvarez (:emilio)]

We provide that when authors use -moz-appearance: textfield, but yeah, ideally there'd be a more standard way to do that.

Comment 6

[Thomas Wisniewski [:twisniewski]]

@Emilio, is there a reason why adding -moz-appearance:textfield !important to the search input on the top-right of the page at http://www.aastocks.com/tc/mobile/quote.aspx?symbol=5 with the devtools inspector does not work?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

It works once you toggle display: none and back or so, so that hints at this code being broken.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #7)

It works once you toggle display: none and back or so, so that hints at this code being broken.

Bug 1786521 fixes it.

Comment 9

[Thomas Wisniewski [:twisniewski]]

@Emilio, so the fix in bug 1786521 does not actually address the webcompat issue with the two noted sites. The pages are setting appearance:none, not textfield. But they are also using -webkit-outer-spin-button and -webkit-inner-spin-button as well to hide the spinners.

So I suspect the way to go here is to just focus on supporting those properties in bug 1355574, unless we feel it will not cause any fallout to hide them when appearance:none is set (but since Chrome and WebKit do not hide them in that case, it would probably be best to not do so unless other vendors agree).

In the meantime we'll attempt outreach on those sites so they use -moz-appearance:textfield, since they're already using vendor-specific CSS.

Thoughts?

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Seems reasonable to me. Supporting the inner/outer-spin-buttons might be doable (if perhaps a bit annoying, not sure).

Comment 11

[Thomas Wisniewski [:twisniewski]]

Bug 1790700 is also semi-related here.

If we feel we would like to support inner/outer for compat, then I can close this as a dupe of that bug and move the see-alsos over.

Comment 12

[Thomas Wisniewski [:twisniewski]]

I've changed the bug title for now so we can make a decision here. To summarize my thoughts:

In my webcompat-diagnosis experience, sites which use the webkit-specific spin-button CSS to hide the spinners also set -webkit-appearance:none on the inputs (and usually, but not always -moz-appearance:textfield)

So if we feel it's worth trying to hide the spinners on appearance:none, rather than implementing the inner/outer spinner CSS as per bug 1355574, that might be a better way to go. Chrome and Safari do not however hide the spinners with appearance:none, only via the webkit-prefixed inner/outer CSS.