用html5 input number,Styling HTML5 input type number

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:

What am I missing?

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;

}

user3464091

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:

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

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.

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

There are only 4 specific atrributes:

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.

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.

max - Apprently, this represents the biggest number of the number input.

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.

Also you can replace size attribute by a style attribute:

Jules

There is a way:

来源：https://stackoverflow.com/questions/12066436/styling-html5-input-type-number