Styling a <textarea>

Can you override rows and cols with CSS?

[Sarnix]

Hi,

is it possible to manipulate the <textarea>-tag, so that i can give it a width and a height instead of rows and cols?

[dmorison]

Hi,

You can (at least in IE6 and the latest Mozilla), but I don't know where it stands as far as CSS standards / specifications are concerned.

[le_gber]

Yes just create a style like:
.textFormFields {width: 150px;} and assign it to all your form fields and they will neatly be aligned.

If you want to assign a height you will need to create another style otherwise your other form fields will have this height.

(I usually also assign font value because the textarea utilize a different type of font than the form fields)

Leo

[dmorison]

Just did a quick experiment;

It seems that the style attributes override rows and cols (as expected), so I would still include both to allow for graceful backward compatibility.

eg:

<textarea cols='20' rows='20' style='width:500px;height=500px;'>blah,blah,blah</textarea>

(or if you're using CSS apply the width and height via a class attribute of course)

[Sarnix]

Thanks for our your answers.
I think this suits best in my situation

style='width:100%;height:100%;'

It seems rather simple, but i don't know if i could have figured that out. At least not in such a short time.
It works excellent in IE and Mozilla. In Opera the height is the height that is needed for the text between the textarea tags. So <textarea style='width:100%;height:100%;'>some text</textarea>, would make the textarea 1 row high.
I try to find a solution for that. If i'll find I'll post it here.