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:

  1. .no-spinners {
  2.   -moz-appearance:textfield;
  3. }
  4. .no-spinners::-webkit-outer-spin-button,
  5. .no-spinners::-webkit-inner-spin-button {
  6.   -webkit-appearance: none;
  7.   margin: 0;
  8. }

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