input width vs textarea width

Question

After reading the thread http://stackoverflow.com/questions/1480588/input-size-vs-width

I'm clear that we should not use size attribute but css style.

What will be the cross browser css that shows exactly same width for both input[text] and textarea?

BTB, I tried

#idInputText, #idTextArea {
font: inherit;
width: 60ex;

}

Is it correct? any better solution?

Thanks in advance for any help.

Answer 1

The native padding for text input elements differ. You will need to assign a different width to input elements and textarea elements and experiment.

#form input.textfield { width:10em; }
#form textarea { width:9em; }

Just throw some default styles ( I prefer ems ) and pop open Firebug and experiment by changing the size values.

I usually throw a class=textfield on <input type=text> so I don't target <input type=submit> or similar.

Answer 2

You will probably get more consistent results with different browsers by applying a CSS reset first. This article lists some good examples:

http://stackoverflow.com/questions/116754/best-css-reset

Once you have eliminated the subtle browser differences on padding and margins, then your master width of 60ex should allow the inputs to line up.

Answer 3

I would avoid a generic CSS reset, but use something like this:

input[type="text"], input[type="password"], textarea {
    width: 60ex;
    margin: 0;
    padding: 2px; /* it's best to have a little padding */
    border: 1px solid #ccc; /* gets around varying border styles */
    border-radius: 4px /* optional; for newer browsers */
}

As long as you're in standards mode and not quirks mode this should work fine for most browsers.

Notes:

• The attribute selectors - [type="text"] - don't work in IE6 so you may wish to opt for a class name instead.
• You can't get all browsers to display form fields exactly the same way.
• Using ex as the unit, whilst a good idea, might not work well in a fixed-pixel width environment.

Answer 4

Use pixel rather than EM or pct values. 60px = 60px across all browsers, regardless of base font size.

Answer 5

padding left and right 0px