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.
You can also use the “step” property to specify how the up and down will increment and decrement the values.