Normalize.css: Remove spin box arrow from input of type number

Created on 26 Jun 2018  ·  3Comments  ·  Source: necolas/normalize.css

I don't know if it is the suitable place to mention this feature but I actually using normalize in my project and I'm using a TextField of type number. The component contains the spin arrows box which are annoying and it looks like TextField Example.
According to this reference ::-webkit-inner-spin-button and CSS: Hide “spinners” (up/down arrows) on inputs with type=”number” using a class I added a style.css to hide the spin arrow box. This is the reference TextField without spin arrow box.
Is not possible to add this feature in normalize.css or there are other constraints?

Most helpful comment

It's a useful accessibility feature. IMO normalize.css shouldn't disable useful accessibility features.

All 3 comments

It's a useful accessibility feature. IMO normalize.css shouldn't disable useful accessibility features.

It's a useful accessibility feature. IMO normalize.css shouldn't disable useful accessibility features.

I agree accessibility shouldn't be disabled. With that said, incorporating ARIA tags is of more value than those little-bitty buttons which are both an accessibility and usability issue. The ability to use the arrow keys as well as typing the value is more practical for all users. That's what should not be removed.

"The increase and decrease buttons are not keyboard focusable, but can be operated with a mouse." so there should be no accessibility issues (REF: https://www.accede-web.com/en/guidelines/rich-interface-components/spinbuttons-simulated-using-aria/).

Perhaps normalize could consider including CSS to increase the size of each spinner's clickable target area of the up/down arrows to at least half the full height of the field, if not remove them.

"The increase and decrease buttons are not keyboard focusable...

But, Except IE11 and less, all other desktop browsers allow up & down arrow buttons to step the numbers.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

janstieler picture janstieler  ·  5Comments

FDiskas picture FDiskas  ·  3Comments

callumlocke picture callumlocke  ·  6Comments

DanielPietrasik picture DanielPietrasik  ·  3Comments

GregBoss picture GregBoss  ·  5Comments