How to make a textbox and a textarea same width cross-browsers?

Question

Setting the width of both the textbox (ie. input type=\"text\") and the textarea to 500px doesn\'t work in IE6 and Chrome, only works fine in FF2 (haven\'t tested other browsers

Answer 1

I use CSS3 to make textbox and input work the same. See jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Works in IE8+, see caniuse.

Answer 2

I have been experimenting and found out that "the ratio" between text input and textarea can be calculated using 21 * 8*x.

If you have

< input type="text" size="X" />< br/> < textarea cols="X">< /textarea>

... and you want them to be equally wide, use this formula to calculate the width for the input text.

if x = 70 then 21*8*70 = 581px

So you will write:

< input type="text" size="70" style="width: 581px" />< br/> < textarea cols="70">< /textarea>

The two will become equal!

In this way in a program/website/etc you can enter the same value and get the same result (cols in textarea)!