Remove spin box arrow from input of type number
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?
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.
Hey I want to work on this issue. Could u please assign it to me?
@gurnoor-garry Just submit a PR
I agree with mvasilkov, the spinners or the arrows in the input type number is a good accessibility feature and should not be removed through normalize CSS. If it is not required then we can hide the arrows or style the arrows in our local CSS. Moreover, users are getting used to the arrows and it is a good feature too.