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    lt input type  number  name  numericInput  size  2  min  0  max  18  value  0    gt    What am I missing

User · Answer

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

User · Answer

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      lt input type  number  min  1  max  5  style  width  2em   gt    Combined with the min and max attributes you can control the width of the input

User · Answer

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    lt input name quantity type text pattern   0-9  1 3   gt    The CSS basically allows for confirmation with an  Thumbs up  or  Down    Example 1  Example 2

User · Answer

lt input type  number  name  numericInput  size  2  min  0  maxlength  2  value  0    gt

User · Answer

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

User · Answer

There is a way    lt input type  number  min  0  max  100  step  5   gt

User · Answer

Also you can replace size attribute by a style attribute   lt input type  number  name  numericInput  style  width  50px   min  0  max  18  value  0    gt

[html] Styling HTML5 input type number

Examples related to html

Examples related to input

Examples related to styles

Examples related to numbers