Styling HTML5 input type number

Question

I'm writing a form in HTML5. One of the inputs is type=number. I want the input to only show 2 digits but it seems to default to showing at least 5 digits, which takes up extra space. I've tried adding size="2" attribute, with no effect.

This the tag i'm using:

<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />

What am I missing?

Answer 1

HTML5 number input doesn't have styles attributes like width or size, but you can style it easily with CSS.

input[type="number"] {
   width:50px;
}

Answer 2

I have been looking for the same solution and this worked for me...add an inline css tag to control the width of the input.

For example:

<input type="number" min="1" max="5" style="width: 2em;">

Combined with the min and max attributes you can control the width of the input.

Answer 3

Unfortunately in HTML 5 the 'pattern' attribute is linked to only 4-5 attributes. However if you are willing to use a "text" field instead and convert to number later, this might help you;

This limits an input from 1 character (numberic) to 3.

<input name=quantity type=text pattern='[0-9]{1,3}'>

The CSS basically allows for confirmation with an "Thumbs up" or "Down".

Example 1

Example 2

Answer 4

There are only 4 specific atrributes:

1. value - Value is the default value of the input box when a page is first loaded. This is a common attribute for element regardless which type you are using.
2. min - Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.
3. max - Apprently, this represents the biggest number of the number input.
4. step - Step scale factor, default value is 1 if this attribute is not specified.

So you cannot control length of what user type by keyword. But the implementation of browsers may change.

Answer 5

Also you can replace size attribute by a style attribute:
<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />

Answer 6

There is a way:

<input type="number" min="0" max="100" step="5"/>  

Answer 7

<input type="number" name="numericInput" size="2" min="0" maxlength="2" value="0" />