Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input type "number" won't resize

Why won't my input resize when I change the type to type="number" but it works with type="text"?

EXAMPLE

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">
like image 435
SaturnsEye Avatar asked Mar 28 '14 10:03

SaturnsEye


People also ask

How do you change the size of the input type number?

The size attribute specifies the visible width, in characters, of an <input> element. Note: The size attribute works with the following input types: text, search, tel, url, email, and password. Tip: To specify the maximum number of characters allowed in the <input> element, use the maxlength attribute.

How do you increase the size of a number in HTML?

To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.


3 Answers

Seem like the input type number does not support size attribute or it's not compatible along browsers, you can set it through CSS instead:

input[type='number']{
    width: 80px;
} 

Updated Fiddle

like image 50
Felix Avatar answered Nov 14 '22 08:11

Felix


Incorrect usage.

Input type number it's made to have selectable value via arrows up and down.

So basically you are looking for "width" CSS style.

Input text historically is formatted with monospaced font, so size it's also the width it takes.

Input number it's new and "size" property has no sense at all*. A typical usage:

<input type="number" name="quantity" min="1" max="5">

w3c docs

to fix, add a style:

<input type="number" name="email" style="width: 7em">

EDIT: if you want a range, you have to set type="range" and not ="number"

EDIT2: *size is not an allowed value (so, no sense). Check out official W3C specifications

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

Tip: To specify the maximum number of characters allowed in the element, use the maxlength attribute.

like image 32
MrPk Avatar answered Nov 14 '22 09:11

MrPk


Rather than set the length, set the max and min values for the number input.

The input box then resizes to fit the longest valid value.

If you want to allow a 3-digit number then set 999 as the max

 <input type="number" name="quantity" min="0" max="999">
like image 33
Michael Avatar answered Nov 14 '22 08:11

Michael