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 {
  -moz-appearance:textfield;
}
.no-spinners::-webkit-outer-spin-button,
.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.