multiline html textarea

Question

My form inherits several css styles, and the default display for a textarea only has a single row-- if you type a paragraph it won't wrap but continues going one the same line. How do I force it back to multi-row output? I have set the "rows" and "cols" attributes in the HTML but it doesn't seem to do anything.

The HTML is highly nested, but the actual input element is:

<input name="input47" type="textarea" rows="3" cols="10" />

The CSS I've tried is:

body form ol.sections li ol.prompts li ol.entries li ol.inputs li input[type=textarea] {
  height: 500px !important;
  white-space: normal !important;
}

The 500px works regardless whether or not I use !important, but there is only a single line of text in the textarea, vertically centered (Chrome and Safari).

EDIT: Clearly I need to brush up on my HTML-- <input type="textarea"> should have been <textarea>

Answer 1

I assume you have something like

white-space: nowrap;

applied to your textarea somewhere in your stylesheet and that's what makes it render the whole chunk of text in one line.

Just add something like

textarea#myfield {
    white-space: normal
}

There should be no need for !important in the style above, but if you don't get the result, you can try !important