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:

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

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.

You may also like:

Love our articles? HostM offers professional and helpful web hosting services with unlimited features and renewal rates that actually match our advertised rates.