How to disable text selection on a web page using CSS

Use the user-select CSS property to prevent the user from being able to select text on a portion of a web page or even an entire web page.

You may wish to prevent text selection on certain portions of a web page such as tabs and navigation areas that may comprise text elements.

In this example, you have a navigation bar on a HTML page, and you would like to prevent a user from being able to select or highlight its text:

<html>
	<body>
		<div class="navbar disable-text-selection">
			<div class="navbar-item">Home</div>
			<div class="navbar-item">Products</div>
			<div class="navbar-item">Contact</div>
		</div>
	</body>
</html>

In the following CSS code, the disable-text-selection class is used to disable text highlighting:

.disable-text-selection {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

That’s all there is to it! The associated text on the web page can no longer be highlighted by the user.