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:
[code lang=”CSS”]
.no-spinners {
-moz-appearance:textfield;
}
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
[/code]
After that add class no-spinners to any number input you would like to see without up/down arrows.

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

Leave a Reply

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

Get Adobe Flash player