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 Web-Kit-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 it to look consistent across browsers and devices. Hence, you might want to hide arrows from Number input or from input[type=number].T

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 following :

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;
}

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 mouse scroll wheel, etc.

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