I have textarea and i want to change color of selected text. Example:

var text = "abcdefg";

I want to change color of selected text efg.

here is my code:

var input = document.getElementById('area');
var value = input.value.substr(input.selectionStart, input.selectionEnd - input.selectionStart);
$('#abc').find(value).attr('color',color);

I have textarea and i want to change color of selected text. Example:

var text = "abcdefg";

I want to change color of selected text efg.

here is my code:

var input = document.getElementById('area');
var value = input.value.substr(input.selectionStart, input.selectionEnd - input.selectionStart);
$('#abc').find(value).attr('color',color);

• javascript
• jquery
• html
• css
• textarea

• You can only add style to elements and text can't has color style. But you can use ::selection css selector. See w3schools./cssref/sel_selection.asp – Mohammad Commented Sep 23, 2016 at 8:32
• You must wrap the selected text in HTML, as textNodes cannot have style. – evolutionxbox Commented Sep 23, 2016 at 8:33
• Why you mixed pure JS & jQuery? – Mehdi Dehghani Commented Sep 23, 2016 at 8:33
• Possible duplicate of CSS3 - How to style the selected text in textareas and inputs in Chrome? – Krupesh Kotecha Commented Sep 23, 2016 at 9:17

2 Answers 2

Use ::selection CSS selector that select part of text is seleced. You can add your CSS property to selected text of elements.

var textarea = document.querySelector("textarea");
textarea.selectionStart = 12;
textarea.selectionEnd = 23;

::-moz-selection { 
    color: red;
}
::selection {
    color: red;  
}

<textarea>My textarea highlighted text</textarea>

You can't change the selection color for a textarea, you can only change it for non-input objects.

Maybe you should try contenteditable instead of textarea