How to Hide the HTML5 Number Input Spin Box?

Concealing the HTML5 Number Input Spin Box

Question:

Can one consistently suppress the appearance of the spin box rendered by some browsers (like Chrome) for HTML inputs of type "number"? How can one prevent the up/down arrows from being visible using CSS or JavaScript?

Example:

<input>

Solution:

To effectively hide the spin box in WebKit browsers (tested in Chrome 7.0.517.44 and Safari 5.0.2), apply the following CSS:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

The above is the detailed content of How to Hide the HTML5 Number Input Spin Box?. For more information, please follow other related articles on the PHP Chinese website!