CSS - hide input type number on chrome and mozilla firefox browsers

HTML5 introduces new input type called "number". We can use this to take number input from user. It's a nice addition to the webpages and make things simpler, but design point of view it is not going to make things simpler.
 Chrome and Mozilla Firefox browsers by default adds up and down arrows. UI can look ugly due to this if arrow is not required.

HTML:

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

CSS:

<input type="number" name="number-demo" >

See the Pen Cross platform hide input type number arrows by Yashwant Patel (@yashwant) on CodePen.

Download Source

Share This:

Post Tags:

CSS HTML5

Yashwant Patel