FormsLesson 130Free preview

Hide Number Arrows

This lesson is part of How To · All levels

Summary

Hide number arrows is a CSS technique for hiding small arrow buttons on type=number inputs. The arrow is a browser-built spinner that sometimes interferes with design. Once hidden, the input still receives numbers and numerical validation, but the user types the value manually.

Key points

The input type=number displays the arrow spinner up and down in many browsers.
Appearance: none and the WebKit pseudo-element hides the spinner.
Firefox uses the -moz-appearance: textfield.
Hiding arrows doesn't disable the validation of numbers.
Include inputmode="numeric" to keep the mobile keyboard fit.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.