How TO - Hide Arrows From Input Number

Learn how to remove arrows/spinners from input type number with CSS.

Try to hover over both number inputs to see the difference:

Hidden arrows:

Default:

Notes on functionality: It is still possible to increment the number when you scroll inside the number input.

Remove Arrows/Spinners

Example

/* 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 »

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our HTML input type="number" reference to learn more about inputs with type="number".

❮ Previous Next ❯