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?

If a max attribute is present and there is no width the input should adjust its size to the max value. At least that is the case in google chrome. — GDY
– GDY, Commented Jul 28, 2017 at 8:36

zak_mckraken · Accepted Answer · 2013-06-02 18:12:35Z

59

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

answered Jun 2, 2013 at 18:12

zak_mckraken

8056 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hamx0r Over a year ago

To clarify, size does still exist for HTML5, but it is only effective for these types: text, search, tel, url, email, and password w3schools.com/tags/att_input_size.asp

Stijn de Witt Over a year ago

Which makes sense. size refers to the length of the text, so it only applies to strings.

holmis83 · Accepted Answer · 2015-10-19 13:58:10Z

22

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.

edited Oct 19, 2015 at 13:58

holmis83

16.7k5 gold badges88 silver badges88 bronze badges

answered Feb 14, 2015 at 12:41

jmiller

59811 silver badges29 bronze badges

2 Comments

user2230470 Over a year ago

The problem with this solution is that this might clip the visibility of the numbers that should be displayed since part of the input number box's width is the up and down arrows contained within it.

ericpeters Over a year ago

I like this solution (or something like style="max-width: 3em;") compared to the other alternatives - at least the width is relative to the font size being used

Dane Balia · Accepted Answer · 2012-08-22 06:05:56Z

11

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

edited Aug 22, 2012 at 6:05

answered Aug 22, 2012 at 5:33

Dane Balia

5,3875 gold badges35 silver badges58 bronze badges

5 Comments

DOK Over a year ago

This is so frustrating. I searched a long time before finding your answer.

dsas Over a year ago

The number state has a 'max' attribute, just set that to 999 instead

Pacerier Over a year ago

@Dane, Your script is not working. The green thumbs up is not showing.

Oded Niv Over a year ago

Sorry @Dane, this doesn't work at all. Also, there are other differences between text and number inputs, other than parsing. Main reason I use the proper type of input is for virtual keyboards (phones) to show the relevant keys.

xtian Over a year ago

The pattern attribute only performs validation on submission but does not prevent me from inserting invalid characters

Danil Speransky · Accepted Answer · 2012-08-22 04:55:56Z

3

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.

answered Aug 22, 2012 at 4:55

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

1 Comment

Michael Lewis Over a year ago

Ok, so, no way currently to style the number input box to be less wide.

Yuanga · Accepted Answer · 2015-05-01 21:13:03Z

1

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

answered May 1, 2015 at 21:13

Yuanga

113 bronze badges

Comments

Michael Mullany · Accepted Answer · 2014-05-01 05:50:23Z

-3

There is a way:

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

edited May 1, 2014 at 5:50

Michael Mullany

32.1k6 gold badges84 silver badges107 bronze badges

answered May 1, 2014 at 5:09

Jules

9

1 Comment

Akhil Gupta Over a year ago

This doesn't quite answer the question, at least not for what I tried. I use chrome, windows 10

Juan Carlos De Luna · Accepted Answer · 2015-04-03 14:00:39Z

-5

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

answered Apr 3, 2015 at 14:00

Juan Carlos De Luna

433 silver badges10 bronze badges

1 Comment

Ben Over a year ago

Please edit your answer, and explain why this solves the problem.

Collectives™ on Stack Overflow

Styling HTML5 input type number

7 Answers 7

2 Comments

2 Comments

5 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

5 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related