Question

I have an input field on a page that looks something like this:

<input type="text" size="20" name="whatever" />

Imagine that I wanted to keep the size attribute and not use CSS instead, and that I wanted to now add a select box to the same form of the same width:

<select name="whatever2">
  <option>an option</option>
</select>

What attribute should I add to get the select box to match the width of the input field?

I initially thought ‘size’ but no – that’s the number of options to display, second thought was ‘style=”width:20em”‘ but it’s bigger…

Answer 1

From the spec:

size = cdata [CN]

This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.

So size for text and password fields represents the number of characters – it’s not used to define the pixel width. Depending on the font used to style the input field, the pixel width of the field may differ.

For this field:

<input type="text" size="25" name="firstname">

The browser will by default render it wide enough to fit 25 characters.

Now, you could theoretically use the above information to determine what width to give it in CSS, but I haven’t bothered with that myself yet. Besides, as oft-noted, how form elements are rendered on pages varies widely from browser to browser, so it may not be a reliable way to size your fields.

Remember that setting a width using CSS always overrides the size attribute.