html5 input hide,javascript - Can I hide the HTML5 number input’s spin box? - Stack Overflow

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;

}

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;

}

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;

}

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;

}