Disable text selection using CSS.

Disabling Text Selection Using CSS Only

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

I know we can disable the text selection using JavaScript, which is robust. But still, if you want to do it using the CSS, then below is an example:

CSS to Disable Text Selection

The following CSS is for the class .unselectable and for any element you want to disable the text selection, use this class. Or specify directly to any element such as <p> or <body>.

.unselectable {
	user-select: none; /* Chrome, Opera and Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	-moz-user-select: none; /* Old versions of Firefox */
	-khtml-user-select: none; /* Konqueror HTML */
	-webkit-user-select: none; /* Safari */
	-webkit-touch-callout: none; /* iOS Safari */
}

HTML Example

<p>Selectable text.</p> 
<p class="unselectable">Unselectable text.</p>

Output:

Selectable text.

Unselectable text.

Related Tutorials: