CODEWITHSUNDEEP
htmlinputstylesnumbers
Michael Lewis
Michael Lewis

Reputation: 481

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:

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

What am I missing?

Upvotes: 48

Views: 130449

Answers (7)

jmiller
jmiller

Reputation: 588

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.

Upvotes: 22

Yuanga
Yuanga

Reputation: 11

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

Upvotes: 1

Juan Carlos De Luna
Juan Carlos De Luna

Reputation: 43

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

Upvotes: -5

Jules
Jules

Reputation: 9

There is a way:

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

Upvotes: -3

zak_mckraken
zak_mckraken

Reputation: 805

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;
}

Upvotes: 59

Dane Balia
Dane Balia

Reputation: 5367

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

Upvotes: 11

Danil Speransky
Danil Speransky

Reputation: 30453

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.

Upvotes: 3

Related Questions