Textarea first line bold

Question

Hi All,

I have a textarea in which I want the first line to be bold (and bigger font) as the first line contains the title. I tried the :first-line pseudo class, this works in IE, but fails in Firefox. Also in IE, enters doesn't work anymore, so I can't break the line.

Is this even possible? And if so, how?

regards, Henk

Answer 1

I don't get the sense of your intention.

Do you want to have a bolder font while typing into the textarea?

Nevertheless according to the css 2.1. specification at w3.org you can't apply the pseudo-element :first-line/:first-letter to a textarea. Only to a block-level element, inline-block, table-caption or a table-cell.

Maybe I can help, if you specify your intention a little bit more.

Answer 2

Textarea is not intended for displaying formatted text.

If you need this functionality then you can use a WYSIWYG editor.

Answer 3

Do you want the first line of the textarea to be bold after the user has finished entering all data?

You could handle that by having a js or server script grab the first line and put that in a separate variable, so it outputs it in a different markup (an h3, perhaps).

Or, if you want the user's title to just standout from the rest, why not have an input for the title and then a textarea for the body, like:

<form>
<p>
<label for="usertitle">Title</label>
<input type="text" name="usertitle" id="usertitle" />
</p>
<p>Body</p>
<p>
<textarea></textarea>
</p>
</form>

This way, the user gets that sense of importance you want. You could even add some javascript that changes the input to an h3 after they start tying in the textarea.