normalize.css icon indicating copy to clipboard operation
normalize.css copied to clipboard

Remove spin box arrow from input of type number

Open slim-hmidi opened this issue 7 years ago • 6 comments

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?

slim-hmidi avatar Jun 26 '18 21:06 slim-hmidi

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

mvasilkov avatar Jun 27 '18 08:06 mvasilkov

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.

brianWreaves avatar Feb 12 '19 06:02 brianWreaves

"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.

Yeswanth-JG avatar Oct 09 '19 11:10 Yeswanth-JG

Hey I want to work on this issue. Could u please assign it to me?

gurnoor-garry avatar Dec 07 '20 11:12 gurnoor-garry

@gurnoor-garry Just submit a PR

garrettw avatar Dec 07 '20 15:12 garrettw

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.

tijivarghese avatar Sep 27 '21 06:09 tijivarghese