How to Remove Arrows (spinner) from Number Input using CSS

The HTML5 number input field is supported by most modern browsers. The browser adds a spinner control to the number input field to increase or decrease the input value. The up and down arrows in the number input help to control the field’s value without manually typing.

The arrows of number input make it easier to increase and decrease value. But it may create some design issues in the custom form design. Because, when you use the input type="number" field, the spinner control (arrows) is automatically added to this field. The arrows can be easily removed from the number field with CSS.

You can use CSS pseudo-element to hide or disable up and down arrows from number input. In the following code snippets, w will show you how to remove arrows from number input using CSS.

Use ::-webkit-inner-spin-button and ::-webkit-outer-spin-button Pseudo-elements to hide arrows from number input field using CSS. The following CSS will work for all the major browsers (Chrome, Internet Explorer & Edge, Safari, etc).

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

Use the following CSS for Firefox.

input[type=number] {
    -moz-appearance:textfield;
}