How To Remove the Arrows on HTML Input Type Number

This article demonstrates how to remove the arrows on the HTML input type number. Included in the example are usable code and a live demo.

This article was first seen on and republished from csstutorial.io

HTML

First, we create an HTML input with the attribute type of number. This creates an HTML number picker element. As you see below, the HTML code for the number picker is small and simple.

<input type="number">

CSS

Secondly, we need to add some CSS styles to remove the appearance of the arrow buttons. This can be achieved with the use of the WebKit CSS pseudo-elements “::-webkit-inner-spin-button” and “::-webkit-outer-spin-button”. These pseudo-elements select the arrows on the input. The pseudo-elements must be used with a CSS selector like “input[type=number]”. The full string would look something like this… “input[type=number]::-webkit-inner-spin-button”. Last, we use the CSS appearance property and set the value to “none”. This effectively hides the arrow buttons on the number picker. In summary, the arrows can be hidden with pure CSS, no javascript is needed.

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

Edit a live demo of this project on codepen.io