Remove Spinners for number input field

Removing spinners for input field will come when we use HTML 5. With the introduction of HTML5, we have input field with number type. <input> elements of type “number” are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

removing spinners

HTML 5 Input tag

<input type=”number”> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create an number input with the proper type value, “number”, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.

It is also helpful on mobile devices. When input type number is used, numeric keyboard opens on the mobile devices.

Why to remove spinners for number input field?

Though it is very useful, when it comes to different browsers, the input field display will be different. We can see spinners; up and down arrows on the right side of the input field, on mozilla and safari. In order to make the display similar in all the browsers, we need to hide the spinners.

How to hide or remove spinners?

Below CSS code will be used for hiding the spinners on input number fields.

CSS for removing spinners

/* 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;
}

In this code you can see we are making the web-kit appearance to none. This will work in chrome and safari. But for mozilla, appearance: none will not work. So we need to add -moz-appearance:textfield;

Removing Spinners for Firefox

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

Demo for Removing spinners for number input

Removing spinners for number input Demo

So this way we can remove the spinners from the number input field. The number input field will be displaying similarly on different browsers.
But you need to remember that, though we have removed the spinners, the functionality remains as it is. When you focus the input field and use the mouse scroll, you can see the number increases or decreases.

label, , , , , , , ,

About the author

Add a Comment

Your email address will not be published. Required fields are marked *