Cross browser setting input "size"-attribute

Question

Can anyone explain to me how the "size"-attribute of input fields works?

In reasonable browsers (like Chrome) I managed to make a size 12 and a size 44 field just as wide (with some margin) as 1 size 60 field. However, in Internet Explorer the two fields are much bigger than the one field.

On another row I have 3 fields, 2 of a 12 size, and 1 of a 28 size. After removing all borders/paddings/margins from the fields, I have the following, and don't understand why:

1 field of size 60 = 327px width

2 fields, 12 & 44 size (56 total size) = 87px & 247px width (334px total width)

3 fields, 12, 12 & 28 size (52 total size) = 87px, 87px & 167px width (341px total width)

Why does it work that way in IE, but differently in other browsers? And is there a way to make it work consistently, using only CSS? (I do not have easy access to other ways. I'm well aware that there are better ways though)

Jukka K. Korpela · Accepted Answer · 2014-12-05 12:00:38Z

4

According to HTML5, the size attribute specifies “the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element's value”. This is a somewhat unfortunate formulation and does not correspond to reality. The description in HTML 3.2 is more realistic: “Used to set the visible size of text fields to a given number of average character widths”. The concept of “average character width” is very vague, and browsers interpret it differently.

Thus, the actual effect of a size attribute depends, in addition to its value of course, on the font face and size and on the browser. There is considerable variation. Moreover, if you have two input elements in succession, on the same line, the total width occupied also depends on the spacing (if any) between the elements.

If you want to have, say, two input fields touching each other and a third input field below them so that it occupies exactly the same width as the two combined, then you should set their width properties in CSS and set the box model so that the width includes padding and border. Example:

<style>
input { box-sizing: border-box }
</style>
<input style="width: 12ch"><input style="width: 44ch"><br>
<input style="width: 56ch">

If you need to worry about old browsers that do not support the ch unit, use the em unit (which corresponds to about 2 times the width of an “average” character, very roughly speaking):

<style>
input { box-sizing: border-box }
</style>
<input style="width: 6em"><input style="width: 22em"><br>
<input style="width: 28em">

(You can also combine the use of units, using em as the fallback unit, e.g. width: 6em; width: 12ch.)

answered Dec 5, 2014 at 12:00

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

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

2 Comments

Sander Koedood Over a year ago

Thank you for the clarification, this however does not solve my problem. I have a form which is set with the size-attribute. The actual with of the size-attribute differs amongst browsers however. Is there a way to get that equal with only CSS?

Jukka K. Korpela Over a year ago

@SanderKoedood, I think I have answered all the questions you actually asked. If you have other questions, please ask them in a new post, illustrating the problem with sufficient HTML and CSS. Note that the CSS width settings, as in my answer, override size attributes, so the approach surely satisfies the “with only CSS” condition.

Collectives™ on Stack Overflow

Cross browser setting input "size"-attribute

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related