Input Size vs Width: Which is Best for Cross-Browser Compatibility?

Input size vs width

When specifying the size of an input field, you have two options: use the size attribute or the width CSS property. But which one is the best cross-browser code?

The answer is: 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.

Edit: I should have mentioned that the size attribute isn't a precise method of sizing: according to the HTML specification, it should refer to the number of characters of the current font the input will be able to display at once.

However, unless the font specified is a fixed-width/monospace font, this is not a guarantee that the specified number of characters will actually be visible; in most fonts, different characters will be different widths. This question has some good answers relating to this issue.

The snippet below demonstrates both approaches.

The above is the detailed content of Input Size vs Width: Which is Best for Cross-Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!