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> 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>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:
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
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.
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.
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:
