Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent the up/down arrows from appearing.
<input id="test" type="number">
This question is related to
javascript
css
html
input
numbers
According to Apple’s user experience coding guide for mobile Safari, you can use the following to display a numeric keyboard in the iPhone browser:
<input type="text" pattern="[0-9]*" />
A pattern
of \d*
will also work.
input[type=number]::-webkit-inner-spin-button, _x000D_
input[type=number]::-webkit-outer-spin-button {_x000D_
-webkit-appearance: none;
_x000D_
<input id="test" type="number">
_x000D_
I needed this to work
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
-webkit-appearance: none
appearance: none
margin: 0
/* Firefox */
input[type=number]
-moz-appearance: textfield
The extra line of appearance: none
was key to me.
This is more better answer i would like to suggest on mouse over and without mouse over
input[type='number'] {
appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button,
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; }
I found a super simple solution using
<input type="text" inputmode="numeric" />
This is supported is most browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Try using input type="tel"
instead. It pops up a keyboard with numbers, and it doesn’t show spin boxes. It requires no JavaScript or CSS or plugins or anything else.
This like your css code:
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
To make this work in Safari I found adding !important to the webkit adjustment forces the spin button to be hidden.
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none !important;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
I am still having trouble working out a solution for Opera as well.
On Firefox for Ubuntu, just using
input[type='number'] {
-moz-appearance:textfield;
}
did the trick for me.
Adding
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Would lead me to
Unknown pseudo-class or pseudo-element ‘-webkit-outer-spin-button’. Ruleset ignored due to bad selector.
everytime I tried. Same for the inner spin button.
I've encountered this problem with a input[type="datetime-local"]
, which is similar to this problem.
And I've found a way to overcome this kind of problems.
First, you must turn on chrome's shadow-root feature by "DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM"
Then you can see all shadowed DOM elements, for example, for <input type="number">
, the full element with shadowed DOM is:
<input type="number">_x000D_
<div id="text-field-container" pseudo="-webkit-textfield-decoration-container">_x000D_
<div id="editing-view-port">_x000D_
<div id="inner-editor"></div>_x000D_
</div>_x000D_
<div pseudo="-webkit-inner-spin-button" id="spin"></div>_x000D_
</div>_x000D_
</input>
_x000D_
And according to these info, you can draft some CSS to hide unwanted elements, just as @Josh said.
Not what you asked for, but I do this because of a focus bug in WebKit with spinboxes:
// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
var els = document.querySelectorAll("input[type=number]");
for (var el in els)
el.type = "text";
}
It might give you an idea to help with what you need.
Firefox 29 currently adds support for number elements, so here's a snippet for hiding the spinners in webkit and moz based browsers:
input[type='number'] {_x000D_
-moz-appearance:textfield;_x000D_
}_x000D_
_x000D_
input::-webkit-outer-spin-button,_x000D_
input::-webkit-inner-spin-button {_x000D_
-webkit-appearance: none;_x000D_
}
_x000D_
<input id="test" type="number">
_x000D_
Maybe change the number input with javascript to text input when you don't want a spinner;
document.getElementById('myinput').type = 'text';
and stop the user entering text;
document.getElementById('myinput').onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8
|| e.keyCode == 9)) {
return false;
}
}
then have the javascript change it back in case you do want a spinner;
document.getElementById('myinput').type = 'number';
it worked well for my purposes
Only add this css to remove spinner on input of number
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
In WebKit and Blink-based browsers & All Kind Of Browser use the following CSS :
/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
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;
}
_x000D_
<input type="number" />
_x000D_
To add to existing answer...
In current versions of Firefox, the (user agent) default value of the -moz-appearance
property on these elements is number-input
. Changing that to the value textfield
effectively removes the spinner.
input[type="number"] {
-moz-appearance: textfield;
}
In some cases, you may want the spinner to be hidden initially, and then appear on hover/focus. (This is currently the default behavior in Chrome). If so, you can use the following:
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}
_x000D_
<input type="number"/>
_x000D_
In current versions of Chrome, the (user agent) default value of the -webkit-appearance
property on these elements is already textfield
. In order to remove the spinner, the -webkit-appearance
property's value needs to be changed to none
on the ::-webkit-outer-spin-button
/::-webkit-inner-spin-button
pseudo classes (it is -webkit-appearance: inner-spin-button
by default).
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
_x000D_
<input type="number" />
_x000D_
It's worth pointing out that margin: 0
is used to remove the margin in older versions of Chrome.
Currently, as of writing this, here is the default user agent styling on the 'inner-spin-button' pseudo class:
input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
display: inline-block;
cursor: default;
flex: 0 0 auto;
align-self: stretch;
-webkit-user-select: none;
opacity: 0;
pointer-events: none;
-webkit-user-modify: read-only;
}
Source: Stackoverflow.com