Select All Text on Click in CSS

  • Post author:
  • Post category:CSS
  • Reading time:2 mins read

You can select all text with a click of an element in CSS, whether it is <div>, <p> or <pre> etc. Here I am giving an example of how you can select all text on click in CSS.

To highlight all text on click of an HTML element, you can use the user-select CSS property.

CSS user-select Example

The following is the HTML code, showing a <div> element having an id selText:

<div id="selText">Your content will be here.</div>

And the following is the CSS code for it:

#selText {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Below is the demo. You can click on the below paragraph (a div element) and it will be selected.

This is the sample content.
Click anywhere here to select all.
Thank you.

Vinish Kapoor

An Oracle Apex Consultant, Oracle ACE, and founder of foxinfotech.in and orclqa.com a question and answer forum for developers.