rajakvk rajakvk - 2 months ago 19
CSS Question

input width vs textarea width

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

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.