Is it possible to have several different textcolors in one textarea?

Question

I'd like several words / phases in a textarea to appear in different colors... How would I go about doing this? Below is an example, I'd like the word green to appear green etc etc...

<textarea style="width: 100%; height: 100%; resize: none;">
Is it possible to have multiple colors in a textarea? 
How would i set certain phases or words to be different colors? 
"Green"
"Red"
"Blue"
</textarea>

Taxpayer

Actually there is one solution without contenteditable, see here: How to change the background color of the modified text in a text area or css-tricks.com/… – Deluna

Answer 1

You can't do this inside a <textarea>, not one that's editable. It sounds like you're after a WYSIWYG editor, most of which use a <iframe> to do this.

There are several JavaScript options for this, to name a few:

• TinyMCE
• CKEditor

Rocket

Sure you can! in-fact what you call a "rich text-box" editor is an editable div, highlighted using CSS or inline-styling (all of WordPress plugins, MCE and editors work this way. See answer below. – Montano

Answer 2

You cannot do this with a textarea or input tag. However, as @naikus mentioned, you can use the contenteditable attribute. It is as follows:

<div id="mytxt" contenteditable="true">
   Hello, my name is <span style="color: blue;">Bob</span>
   and I have a friend name <span style="color: green;">Joe</span>.
</div>

<div id="mytxt" contenteditable="true">
       Hello, my name is <span style="color: blue;">Bob</span> and I have a friend name <span style="color: green;">Joe</span>.
    </div>

Selfstarter

Answer 3

I don't think its possible to do that with a textarea and html alone. What you need is a Rich Text box You can either roll your own by modifying an iframe, or use the popular ones available

Other option you can have when you target html5 enabled browsers is the contentEditable attribute. You can use it to make a textbox-like control

Benitobenjamen

Answer 4

This is not possible in a normal textarea.

• For syntax highlighting-like approaches, see the answers to this question.

• For a more complicated, full-fledged WYSIWYG solution that can do colours as well as other formatting, images, etc., see a WYSIWYG editor like CKEditor.

Cointon

Answer 5

That's not possible with current w3c specs. If you're looking for a workaround, check codemirror or editArea for their workarounds for syntax highlighting.

Mosier

Answer 6

You can't do this with default html controls. You can use Rich Text Box editors to get what you want, for example check this question:

What is the best rich textarea editor for jQuery?

Ize