How Can I Hide the Spin Box on HTML5 Number Inputs?

Hiding the HTML5 Number Input's Spin Box

Modern browsers like Chrome often display spin boxes alongside HTML5 number inputs for convenient value adjustment. However, these spin boxes can sometimes interfere with user interfaces.

One method to hide the spin boxes is through CSS:

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

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

This CSS effectively conceals the spin boxes in Webkit browsers (e.g., Chrome and Safari) while ensuring compatibility with Firefox by using the -moz-appearance:textfield property.

By implementing this CSS, you can prevent the display of up/down arrows, providing a cleaner and more streamlined user interface for your number inputs.

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