1355574 - Consider adding support for ::-webkit-outer-spin-button and/or ::-webkit-inner-spin-button on <input type=number>

Status: NEW

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Mats Palmgren (inactive)]

From bug 1355521 comment 0:
===============================================
Apparently people have been using the following CSS as a pattern to remove the stepper UI from input type=number from Chrome/Safari and Firefox:

input.wt-numpad[type=number]::-webkit-inner-spin-button, 
input.wt-numpad[type=number]::-webkit-outer-spin-button { 
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

input.wt-numpad[type=number] {
     -moz-appearance: textfield;
}
===============================================

When we eventually disable -moz-appearance (bug 1351745), then the second
rule above will not have any effect and the spin buttons will be visible.
We should consider supporting the -webkit- pseudo(s) for that reason.

Comment 1

[Mats Palmgren (inactive)]

Personally though, I think it's sad that authors thinks the spin buttons are so
ugly they decide to *degrade* the UI by removing them.  I consider it user-hostile
to remove the spin buttons, because they provide a semantic cue to the user that
only numbers are allowed, as well as providing buttons to change the value.

Comment 2

[Cameron McCormack (:heycam)]

There are also examples like on https://www.wework.com/l/melbourne when you click the "number of people" drop down, where it wants to hide the native spin buttons because the page has its own. The styles on this page don't have any -moz-appearance rules to change the input to a plain text field.

Comment 3

[Bernat]

(In reply to Mats Palmgren (inactive) from comment #1)

Personally though, I think it's sad that authors thinks the spin buttons are
so
ugly they decide to degrade the UI by removing them. I consider it
user-hostile
to remove the spin buttons, because they provide a semantic cue to the user
that
only numbers are allowed, as well as providing buttons to change the value.

I don't think it's user-hostile. There are situations were they don't work well or at all.

One example: readonly input fields. Why should readonly inputs have spinner buttons? They're misleading because the value can't be changed.

Same with disabled inputs but in this case at least the spinner buttons are greyed out.

Comment 4

[Bernat]

More reasons to hide the spin buttons and disable related functionality:

• Typing "100" is a lot easier than clicking 100 times the spin buttons. And that's considering your step is 1, because it might be 0.01. It's only useful when the value you want is very close to the default value in the field.
• They make forms with several numeric fields too crowded specially on smaller screens.
• Using the scrollwheel over the field will accidentally change the value without the user noticing most of the times when they just wanted to scroll the page. I think this is related.
• Similarly, using arrows up and down will change the value too.

Comment 5

[Bernat]

I've posted fixes for number input fields at https://bugzilla.mozilla.org/show_bug.cgi?id=1741469#c22 and https://bugzilla.mozilla.org/show_bug.cgi?id=1704077#c18