Menu
The following size attribute has no effect whatsoever. Why?
<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba">
It's defaulting to 60 characters and there's seemingly nothing I can do to change that.
840
If you want to target specific sizes use: input[type=number][size="3"]{ width: 3em; } etc.
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.
Input value length You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters. The example below requires that the entered value be 4–8 characters in length.
The size attribute defines the width of the <input> form control. Valid for <select> and input of type text, search, tel, url, email , and password . Otherwise it is ignored. Defines the width of the <input> , unless overridden with CSS width property.
Presumably you have some styling affecting it. Without any style rules, it works just fine. But when you apply a style rule with a smaller size, that takes precedence.
To figure out what style rule is affecting it, right-click it and choose "Inspect Element," then look at the styling information shown to the right.
139
Use a textarea element instead of the input element:
<textarea cols="80" rows="1" style="overflow: visible" placeholder=
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea>
This produces more consistent, though not completely consistent rendering. The setting overflow: visible is there to make IE reserve room for 80 characters, otherwise only 79 will fit, due to vertical scroll bar.
Why does the problem appear with input:
The attribute size="80" sets the visible width of the field to the “average” width of 80 characters. This is not exactly defined (what “average”?), and browsers implement it even illogically: using size="80" tends to give considerably less width than 4 times the default width of 20 characters. So the browser isn’t even consistent. The proportion depends on the font and on the browser. (This happens on other browsers as well.)
If you need to keep using input:
You could use style="width: 80ch", but not all browsers support this CSS3 feature, and there is no guarantee that it has been implemented properly. The ch unit is by definition the advance width of the digit zero, '0', which is in most fonts the same as the advance width of digits in general. (E.g., Firefox almost correctly implements this. Almost, but not quite.)
You could set the font in the <input> elements to some monospace font. This does not remove the issue, but it makes the widths closer to the specified widths.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
