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.

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.