Disable webkit's spin buttons on input type="number"?
CssHtmlWebkitCss Problem Overview
I have a site which is primarily for mobile users but desktop too.
On Mobile Safari, using <input type="number">
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.
Css Solutions
Solution 1 - Css
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;
}
Solution 2 - Css
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;
}
Solution 3 - Css
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;
}
Solution 4 - Css
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;
}
Solution 5 - Css
Another solution to avoid the browser default spinner for the number type
by changing
-
type into text
-
inputmode into numeric and
-
number only pattern "[0-9]*"
<input type="text" inputmode="numeric" pattern="[0-9]*" />
Unlike 'number' type, the above solution still allows the user to enter non-number characters in the input box but you can avoid invalid submission by listening to the oninvalid
event.
Solution 6 - Css
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;
}