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 place HTML elements inside a text area, only text content. only text content covers that part.
The id attribute is required to link the text area with a label. Attribute values: autocomplete: It is used to specify whether the Textarea field has autocompleted on or off. autofocus: It is used to specify that the textarea field should get automatically focus when the page loads.
<textarea> is a replaced element — it has intrinsic dimensions, like a raster image. By default, its display value is inline-block .
The maxlength attribute specifies the maximum length (in characters) of a text area.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With