CSS tip: remove spinner on input of number

With the new HTML5 input field type came a few extra type of input fields. One of them is the input type number. Most modern browsers support the field and will add a spinner control (up and down arrows) in the field, which makes it easier to increase and decrease the value. Some mobile devices will show the numeric keyboard.

There is some case when you do not need that spinner functionality and you can use the CSS code snippet below to hide it.

/* For Firefox */
input[type='number'] {
    -moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Before and after the CSS snippet