Disable webkit s spin buttons on input type number

Question

I have a site which is primarily for mobile users but desktop too   On Mobile Safari  using  lt input type  number  gt  works great because it brings up the numerical keyboard on input fields which should only contain numbers   In Chrome and Safari however  using number inputs displays spin buttons at the right side of the field  which looks like crap in my design  I really don t need the buttons  because they are useless when you need to write something like a 6-digit number anyway   Is it possible to disable this with -webkit-appearance or some other CSS trick  I have tried without much luck

User · Answer

Not sure if this is the best way to do it  but this makes the spinners disappear on Chrome 8 0 552 5 dev   input type number   -webkit-inner-spin-button       -webkit-appearance  none

User · Answer

You can also hide spinner with following trick    input type number   -webkit-inner-spin-button  input type number   -webkit-outer-spin-button     opacity 0    pointer-events none

User · Answer

I discovered that there is a second portion of the answer to this   The first portion helped me  but I still had a space to the right of my type number input  I had zeroed out the margin on the input  but apparently I had to zero out the margin on the spinner as well   This fixed it   input type number   -webkit-inner-spin-button  input type number   -webkit-outer-spin-button       -webkit-appearance  none      margin  0

User · Answer

The below css works for both Chrome and Firefox  input type number   -webkit-outer-spin-button  input type number   -webkit-inner-spin-button       -webkit-appearance  none      margin  0     input type number        -moz-appearance textfield

User · Answer

It seems impossible to prevent spinners from appearing in Opera  As a temporary workaround  you can make room for the spinners  As far as I can tell  the following CSS adds just enough padding  only in Opera   noindex -o-prefocus  input type number        padding-right  1 2em

[css] Disable webkit's spin buttons on input type="number"?

Examples related to css

Examples related to html

Examples related to webkit