HTML and CSS size correlation between size attribute and CSS wicth

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 开发者_Python百科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...

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.

Using size is not as precise as using css. If you wan't to support browsers that can't use css, then use both size and css width.

For the input type you wrote width=20 but you set the select box to width:20em. you should use the same metrics for both, so either 20em or just 20 and let the browser engine set the default metric.

Just with CSS you can't do this, because size doesn't describe the size on the screen but the size of characters to fit in.

Maybe you want to use JavaScript for this, with jQuery it would look like this:

$('#idOfTheSelect').css('width', $('#idOfTheInput').width());

If you want to make them have the same width with pure CSS, you can set both to e.g. width: 20em.

The size attribute is based on the font size, so you would have to set the same font settings for the textbox and the dropdown for the values to correspond.

Still, the elements have different settings for border and padding, and there are usually some additional control in the dropdown (i.e. an expansion arrow) that needs more space.

Making different form elements have the same size is very tricky, as different browsers have different default settings and display the elements in different ways. Even the same browser differs depending on the visual settings in the operating system. You simply can't expect to get a consistent result without a lot of work testing different settings.