Select All Text on Click in CSS

Select All Text on Click in CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min 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.