Can I hide the HTML5 number input’s spin box?
Solution 1
This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />
You can always use the inspector (webkit, possibly Firebug for Firefox) to look for matched CSS properties for the elements you are interested in, look for Pseudo elements. This image shows results for an input element type="number":
Solution 2
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'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<input id="test" type="number">
Solution 3
Short answer:
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;
}
<input type="number" />
Longer answer:
To add to existing answer...
Firefox:
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;
}
<input type="number"/>
Chrome:
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;
}
<input type="number" />
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;
}
Solution 4
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.
Solution 5
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
Alan
Updated on July 14, 2022Comments
-
Alan almost 2 years
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">
-
Pushkar Mahajan over 13 yearsCan you post an example of the code you're using? A screenshot would be great as well so we know what you're looking at. I'm looking at
<input type="number" min="4" max="8" />
in Chrome and seeing a typical input field with up and down arrows on the side. -
Alan over 13 yearsYou are seeing exactly what I am seeing. I am trying to keep the type=number markup to ensure that mobile browsers bring up an appropriate keyboard, and prevent the up and down arrows from appearing in computer browsers.
-
Aaron Gray almost 9 yearsIf you're using number inputs, be sure to use something that plays nice with modern iOS, Android, and Desktop browsers:
<input type="number" pattern="[0-9]*" inputmode="numeric">
. More info: stackoverflow.com/a/31619311/806956 -
Agi Hammerthief over 5 yearsWhat I suggest doing is writing markup along the lines of
<input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... >
and using jQuery Validati or similar to handle validation. I haven't tested this approach, which is why this is a comment, rather than an answer.
-
-
philfreo over 11 yearsIt seems that Chrome no longer has a problem, so you can just use
display: none;
as the only thing inside the selector -
mgol about 11 yearsThis is unfortunately not cross-browser so I'd advise against using
type=number
if you have to hide these arrows. E.g. currently they'd be still displayed in Opera and they'll start being displayed in Firefox, IE etc. when they implement this input type. -
Pepijn almost 11 yearsThis solution does not currently do any validation in any browsers like
type=number
does. -
Rory O'Kane over 10 yearsThis currently does nothing on Android, in all browsers. Tested on this test page in Browser 4.2.2, Chrome 28, and Firefox 23 on Android 4.2. Those browsers just show the standard text keyboard with this markup.
-
Rory O'Kane over 10 yearsThe telephone keyboard is not as good as the number keyboard, though it’s far better than the text keyboard. The telephone keyboard has irrelevant letters and symbols that are omitted from the number keyboard. (Tested with this page on Android 4.2.)
-
gion_13 over 10 yearsthere is no "." in the tel keyboard :-<
-
Vasil Popov about 9 yearsThis is not a solution, and by the HTML5 standards its stupid. input[tel] is for phone numbers, input[number] is for generic numbers, including floating point ones. So this is not a solution at all.
-
RozzA over 7 yearsi like this answer better because it includes relevant firefox info, which, when developing something, needs to be considered. webkit-only answers that ignore other browser engines leave much to be desired
-
Luke over 3 yearstechnology.blog.gov.uk/2020/02/24/… explains why UK gov switched from type="number" to this solution.
-
Shivam Jha over 2 yearsJust use `<input inputmode="numeric" ... /> It has wide support now
-
vsync over 2 yearsCan still type any character if you have a physical keyboard
-
vsync over 2 yearsCan still type in non-numeric characters - which is undesired. The usability thing is not always important, as the limitation effect of allowing to input only numbers, which is a huge plus
-
vsync over 2 yearsothers wrote the same thing years before, so why did you choose to add this still?
-
RoboticRenaissance over 2 yearsI would not call that "wide support"...
-
Johansrk over 2 yearsfor some reason I can type in the letter 'e' in Chrome 94
-
Eugene Karataev over 2 years@Johansrk because letter 'e' can be a part of a valid number, i.e. 1e3 === 1000.
-
Pepijn Gieles over 2 yearsYou can put in non-numeric characters but not submit the form. I'd argue that's a plus because this way you can detect errors and give a proper validation message. If someone mistypes but only can put in numbers, the values might be right according to the rules but not from a user point of view. For example if someone types in
1K
, they mean1000
. But if theK
can't be typed in, you cannot detect this mistake. The input will be1
, which is not what was meant. -
vsync over 2 yearsTure, but consider
form
ancestor element is not a must, and it's more common for "form" components not to be wrapped with a<form>
element in web-apps which are not meant to act as web page due to the nature of such systems. -
Peter VARGA over 2 years@vsync The OP and youjin never mentioned that it won't be possible. There lot of another posts handling this - for example stackoverflow.com/questions/995183/…