Highlight text in textarea

Question

I need to hightlight some of the text inside the a <textarea> field using CSS. The text should to be highlighted by default.

I have a normal <textarea> where the user types something. I need to set the background-color just for specific text.

What do you exactly mean with highlight? Do you want to highlight all the text or just part of it? — RoToRa, Aug 23 '10 at 12:26
Your question is far too vague to provide a straightforward answer, please update it with more details, examples, samples, things that you've tried so far, etc. My itchy trigger finger is dying to click the close button. — Andy E, Aug 23 '10 at 12:31
duplicate : http://stackoverflow.com/questions/142527/highlight-text-inside-of-a-textarea — Haim Evgi, Aug 23 '10 at 12:35

score 2 · Answer 1 · answered Sep 29 '16 at 03:36

You need to use two separate layers. One to display the textarea text and one to show the highlighting. You'll require js, css and html. Ignore the nay-sayers. Coding is about finding solutions. People whom tell you there isn't one, usually aren't coders, they are designers.

Álvaro González · Answer 2 · 2010-08-23T12:50:27.033

I presume you mean having the text selected so it can be removed when the user starts typing or copied to the clipboard. You cannot accomplish such thing with CSS: you need to use JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
window.onload = function(){
    var t = document.getElementsByTagName("textarea");
    for(var i=0, len=t.length; i<len; i++){
        t[i].select();
    }
}
//--></script>
</head>
<body>

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>

</body>
</html>

Since you can only have one selected item at a time, it's probably more interesting to select text on focus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
window.onload = function(){
    var t = document.getElementsByTagName("textarea");
    for(var i=0, len=t.length; i<len; i++){
        t[i].onfocus = function(e){
            e.target.select();
        }
    }
}
//--></script>
</head>
<body>

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
<textarea>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

</body>
</html>

Disclaimer: this sample code is not tested and probably buggy.

Update

Do you mean this?

textarea{
    background-color: #FFEFC6;
}

I don't want to select the text, I need only background color of the text. — Santhosh, Aug 23 '10 at 12:42

score 0 · Answer 3 · answered Aug 23 '10 at 22:13

You can't do this in HTML/CSS. Textarea is a block level element and the text inside would need to be wrapped in an inline level element to give it separate highlighting. Try to hack something out from a trimmed down simple WYSIWYG like http://code.google.com/p/jwysiwyg/

Highlight text in textarea

3 Answers3

Update