input size Vs width

Question

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

or

 <input name="txtId" type="text" style="width:150px;"/>

Which one is optimal Cross-browser friendly code?

Of course, it depends on requirement but curious to know how people around decide which on what basis. (afraid I expressed my question clearly)

Answer 1

You can use both. The css style will override the size attribute in browsers that support CSS and make the field the correct width, and for those that don't, it will fall back to the specified number of characters.

Also I'd recommend styling the fields in a stylesheet rather than inline.

Edit: sorry, I should have mentioned that the size attribute isn't a precise method of sizing - it refers to the number of characters the field will be able to display at once.

Answer 2

HTML controls the semantic meaning of the elements. CSS controls the layout/style of the page. Use CSS when you are controlling your layout.

In short, never use size=""

Answer 3

You'll get more consistency if you use width (your second example).

Answer 4

I suggest, probably best way is to set style's width in em unit :) So for input size of 20 characters just set style='width:20em' :)

Answer 5

CSS FTW!

em's are safe bets, and so are widths!

Answer 6

size is inconsistent across different browsers and their possible font settings.

The width style set in px will at least be consistent, modulo box-sizing issues. You might also want to set the style in ‘em’ if you want to size it relative to the font (though again, this will be inconsistent unless you set the input's font family and size explicitly), or ‘%’ if you are making a liquid-layout form. Either way, a stylesheet is probably preferable to the inline style attribute.

You still need size for <select multiple> to get the height to line up with the options properly. But I'd not use it on an <input>.