How to Remove Arrows From Input Type Number With CSS

As a web developer, you may have come across a situation where you want to remove the up and down arrows from an input type number field.

By default, the input type number comes with these arrows, allowing users to increase or decrease the value.

However, in some cases, you may want to get rid of these arrows for aesthetic reasons or to prevent users from changing the value.

Fortunately, it’s possible to remove the arrows from input type number with CSS.

In this comprehensive tutorial, we’ll show you how to do just that.

We’ll also provide code examples to help you better understand the process.

Removing Arrows with CSS

One way to remove the arrows from input type number is to set the appearance property to none.

This property is supported by most modern browsers and helps to hide the default appearance of an element.

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

In the code example above, we’re using the pseudo-element ::-webkit-inner-spin-button and ::-webkit-outer-spin-button to target the up and down arrows in webkit-based browsers such as Google Chrome and Safari.

Another way to remove the arrows is to set the width and height of the spin buttons to 0. This effectively hides the buttons, making them invisible to the user.

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: 0;
width: 0;
margin: 0;
}

It’s important to note that these CSS rules only apply to webkit-based browsers.

If you want to target other browsers such as Mozilla Firefox or Microsoft Edge, you’ll need to add additional CSS rules.

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

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

In the code example above, we’re using the -moz-appearance property to target Mozilla Firefox.

We’ve also added additional pseudo-elements to target the up and down arrows in Mozilla Firefox.

Removing Arrows with JavaScript

Another way to remove the arrows from input type number is to use JavaScript.

With JavaScript, you can hide the arrows by setting the display property to none.

var input = document.querySelector('input[type="number"]');
input.style.webkitAppearance = 'none';

In the code example above, we’re using the querySelector method to select the input type number and setting the display property to none using JavaScript.

It’s important to note that this method is not as reliable as the CSS method, as it depends on the user’s browser and JavaScript support.