How to hide arrows from Number input?

I am sure that by now you would have used various new input types available as a part of HTML5. Many of these input types have eliminated the requirement for JavaScript, too, in many scenarios. One such new input type is the Input type number. The syntax for the same is <input type=”number”> . The input type number tells the browser/device that only numbers are allowed within the input value. However, when you use Input Type Number, you’ll notice that on WebKit-based browsers like Chrome and Safari, etc, there would be an up and down arrow or spinners coming up within the input type number. While this is a helpful feature, not every time would you want to have these spinners, especially when you want them to look consistent across browsers and devices. Hence, you might want to hide arrows from Number input or from input[type=number]. So, let’s take a look at how we can, from this input type number, remove arrows using CSS alone.

How to remove arrows from input type number?

These spinners or arrows in the Input type number can be removed easily using CSS. These come up only on a web-kit browser, and hence by targeting the webkit-based CSS properties, we can remove them. The CSS to remove the spinners in webkit browser and to remove the arrows from input type number on Firefox is as follows:

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

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

/* The General property for newer browsers */
input[type=number] {
  appearance: textfield;
}

Please note that this CSS would only remove the spinners or the arrows within the Input type number on a WebKit browser, like Chrome or Safari, etc. However, it would NOT remove the other features like increasing or decreasing the number using the mouse scroll wheel, etc. However, using CSS alone, you can now handle these input type number and remove arrows or spinners easily.

This is how it would look after the arrow is hidden from the input type number:

Hope you found this article helpful. Please do like us on Facebook and follow us on Twitter.