Multicolor Text Highlighting in a Textarea or Text Input

Question

I\'d like to set text in a textarea or text input using different colors (one or the other is fine, I don\'t need both). Think of something like simple syntax highlighting.

Answer 1

No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input. You'll need an editable element or document to achieve syntax highlighting. Example (works in all recent browsers; the last major browser not to support contenteditable was Firefox 2.0):

<code contenteditable="true">
  <span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>

Answer 2

This can actually be done by using styling inside of the tag, this is a reference from one of my websites where i have done this

<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
 blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
 type="text"
 required autofocus />

Answer 3

Are you finding this?

Use jQuery.colorfy

Code: https://github.com/cheunghy/jquery.colorfy

Demo: http://cheunghy.github.io/jquery.colorfy/

Screencast: https://www.youtube.com/watch?v=b1Lu_qKrLZ0

Answer 4

you can simply make a SPAN tag for selecting some part of the text, for example:

Some <span style="color:#FF3333">text</span> here

Wich will make the word text look in red