Home » CSS » Disabling Text Selection Using CSS Only

Disabling Text Selection Using CSS Only

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>


Selectable text.

Unselectable text.

Related Tutorials: