2

Is there any way to change the background-color of text in a web page dynamically, while select the particular text.

Ex :

Sample text display in the html page. I want to high light the particular text in that page, while selecting from mouse pointer.

My Ground Work :

Add the class "CSS Style" for particular selected text. But how to take the selected text from a web page dynamically.

Weafs.py
  • 22,731
  • 9
  • 56
  • 78
R D
  • 1,330
  • 13
  • 30
  • Check if this helps : http://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse – Abhishek Jan 20 '15 at 11:22
  • Thanks @Abhishek Even this works only if know the selected content previously. My question is that user will select the content dynamically while reading the content in the web page. Only that content has to high lighted. – R D Jan 20 '15 at 11:32

1 Answers1

3

You could style the selected text dynamically using the CSS selector ::selection.

#content::selection {
  background-color: plum;
  color: white;
}
#content::-moz-selection {
  background-color: plum;
  color: white;
}
<div id="content">Sample text display in the html page. I want to high light the particular text in that page, while selecting from mouse pointer.</div>
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
  • Ya this ok My question is how to take the selected content dynamically to replace. – R D Jan 20 '15 at 11:23
  • In inner HTML you can take all the content of particular element. If i have selected only particular content how its work? – R D Jan 20 '15 at 11:24
  • Ya your code works statically if know the selected content correct? What i am asking is that user will select the content dynamically while reading the content in the web page. – R D Jan 20 '15 at 11:30
  • @RajavelD - Check out the update. Sorry for the misunderstanding. – Weafs.py Jan 20 '15 at 11:35
  • Thanks chipChocolate.py Your codes sounds good. But if i selected second statement first selected content again changes to default one. – R D Jan 20 '15 at 11:40
  • @RajavelD - To highlight more text you have to press and hold the Ctrl key and select the second text. – Weafs.py Jan 20 '15 at 11:42
  • I want to ask one more thing is there any way to read the selected content by mouse? – R D Jan 20 '15 at 11:48
  • @RajavelD - What do you intend to do with it? – Weafs.py Jan 20 '15 at 11:53
  • In a web page i want to highlight the selected content by the user. Not using Ctrl key and all. Ex. in a tutorial if any impotent points the user want to highlight with there own session not for entire web site. – R D Jan 20 '15 at 11:57
  • 1
    @RajavelD - For that you will have to use JavaScript. [Here](http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text) are some solutions that will help you. – Weafs.py Jan 20 '15 at 11:58
  • Thank you very much chipChocolat.py – R D Jan 20 '15 at 12:01