How to hide the arrow in the number input box

Learn how to use CSS to remove the arrow or spin box from the number input box.

Try hovering over two number input boxes to see the difference:

Hidden arrow:

Default:

Function description:You can still increase the number when you scroll the wheel inside the number input box.

Hide the arrow

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Try it yourself

Related pages

Tutorial:Formulário HTML

Manual de referência:HTML <input type="number">