Hide up/down arrows on inputs with type=”number”

HTML5 brought many cool things and input type number is one of them. It allows to input only numbers from the box and there is a way to specify limits for input values. However together with those useful features it has one annoying thing – up/down arrows on the right side, embedded into field. If you don’t like them just change field type to textinput and they disappear. But there is a more elegant way to hide them and the same time use all advantages of HTML5 number form input. Just add to your CSS file following code:

.no-spinners {
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;

After that add class no-spinners to any number input you would like to see without up/down arrows.

Published by

Michael Stepanov

Site owner and admin :)

One thought on “Hide up/down arrows on inputs with type=”number””

Leave a Reply

Your email address will not be published. Required fields are marked *