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

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

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

Table of Contents


<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 input number is increased or decreased when using arrow up or arrow down key.
    • 1: it increases 1 every step.
    • 0.01: it trigger decimal support and increases 0.01 every step.
    • any: it trigger decimal support. However, arrow up key increases 1 integer value.

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

Remove Arrows

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

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

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

Leave a Comment

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

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.