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.

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 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-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.