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

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>

Solution 1:

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>

Solution 2:

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