How to Disable text selection using CSS

In most browsers, this can be achieved using proprietary variations on the CSS user-select property, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions.

.noselect {
	-webkit-touch-callout: none;			/* For iOS Safari */
	-webkit-user-select: none;				/* For Chrome/Safari/Opera */
	-khtml-user-select: none;				/* For Konqueror */
	-moz-user-select: none;					/* For Firefox */
	-ms-user-select: none; 					/* For Internet Explorer/Edge */
	user-select: none;						/* Non-prefixed version, currently
											not supported by any browser */
}
<p>You can Select This Text</p>
<p class="noselect">You can't Select This</p>

Note that user-select a non-standard feature. It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.

For Internet Explorer 9 and earlier versions you can use JavaScript code on event attributes.

<p onselectstart="return false;" ondragstart="return false;">You can't Select This</p>

Leave a Reply

Your email address will not be published. Required fields are marked *