[Solved-6 Solutions] Can We hide the HTML 5 number input’s spin box - javascript tutorial
Problem:
How to hide the HTML5 number input's spin box ?
<input id="test" type="number">
Solution 1:
Firefox:
In Firefox browser, the default value of the -moz-appearance property on these elements is number-input.
To changing the value of text field effectively to removes the spinner.
input[type="number"] {
-moz-appearance: textfield;
}
We want the spinner to be hidden initially, and then appear on hover/focus.
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}
<input type="number"/>
Chrome:
In Chrome, the default value of the -webkit-appearance property on these elements is textfield.
To remove the spinner, the -webkit-appearance property's value wants to be changed as none on the ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo classes.
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<input type="number" />
Margin: 0 is used to remove the margin in earlier versions of Chrome. Here 'inner-spin-button' pseudo class is the default value:
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 2:
Using CSS to hides the spin-button for webkit browsers.
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 */
}Solution 3:
Currently Firefox 29 adds support for number elements:
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 4:
To display a numeric keyboard in an iPhone browser, we can use the following code:
<input type="text" pattern="[0-9]*" />
A pattern of \d* will also work.
Solution 5:
Using input type="tel". It pops up a keyboard with numbers, and it doesn’t show spin boxes. It doesn't requires JavaScript or plugins.
Solution 6:
This is one of the solution:
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
//Supports Mozilla
input[type=number] {
-moz-appearance:textfield;
}<input type="number"/>