Problem
I have a site that caters largely to mobile consumers, but also to desktop visitors.
Using input type=”number”> on Mobile Safari works excellent because it displays the numerical keyboard on input fields that should only contain numbers.
Using numerical inputs in Chrome and Safari, on the other hand, displays spin buttons on the right side of the field, which looks terrible in my design. I don’t need the buttons because they’re useless when you need to write anything like a six-digit number in the first place.
Is it feasible to prevent this with a CSS technique like -webkit-appearance? I’ve tried but haven’t had much luck.
Asked by pojo
Solution #1
There is a second part to the answer, which I uncovered.
Although the first section was helpful, there was still a blank space to the right of my type=number input. I had canceled out the input margin, but it appears that I also had to zero out the spinner margin.
This fixed it:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Answered by Bob Spryn
Solution #2
The CSS code below is compatible with 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;
}
Answered by Rolwin Crasta
Solution #3
On Chrome 8.0.552.5 dev: I’m not sure if this is the best method to do it, but it makes the spinners disappear.
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Answered by robertc
Solution #4
It appears that preventing the appearance of spinners in Opera is impossible. You can make place for the spinners as a temporary fix. 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;
}
Answered by Goulven
Solution #5
Another solution to avoid the browser default spinner for the number type by changing
<input type="text" inputmode="numeric" pattern="[0-9]*" />
Unlike the ‘number’ type, the above method allows the user to enter non-number characters in the input box, but by listening to the oninvalid event, you can avoid invalid submission.
Answered by SridharKritha
Post is based on https://stackoverflow.com/questions/3975769/disable-webkits-spin-buttons-on-input-type-number