How to hide arrows from Number input?

MoreOnFew
Posted underCSS

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.

TaggedCSSCSS3Webkit


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for How to check if checkbox is checked in jQuery?

How to check if checkbox is checked in jQuery?

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked … Read more

MoreOnFew
Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew