HTML5 Input Type Number: Min, Max, Decimal Number, Remove Arrows

Textfield is the basic input field for both text and numbers for a while. Now we have a number field, which is used to input numbers like integers and floats. <input type="number"> tag can help simplify your work when implementing entering numbers into a form.

On the desktop, this field only accepts numbers. If you input characters, it refuses to type in the characters. On mobile, the Numpad is called when the field is focused.

Table of Contents

Basics

<input class="form-control" min="0" max="10000" name="price" step="0.01" type="number" value="16">
  • min: acceptable minimum value.
  • max: acceptable maximum value.
  • step: determine how the input number is increased or decreased when using arrow up or arrow down key.
    • 1: it increases 1 every step.
    • 0.01: it triggers decimal support and increases by 0.01 every step.
    • any: it triggers decimal support. However, arrow up key increases by 1 integer value.

How to allow the Input Number field to accept decimal values?
As in the description above, you need to use the step attribute. Any is used if you don’t want to restrict a number of decimal digits.

Remove Arrows

By default, there is an arrow up and an arrow down at the end of the input field. It doesn’t look good so we need to remove these arrows.

//for webkit
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
//for Firefox
input[type=number] {
-moz-appearance:textfield;
}

Note: Input Number doesn’t support IE below 10.

Leave a Comment

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


Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close