How to make certain text unselectable with CSS?

Sometimes we need to do something that the user can not select the certain text or whole text of some pages. So the question is how to make certain text unselectable by using CSS?

Well, there is a code called user-select present in CSS by which we can fulfil the above need. user-select has currently supported all browsers except IE9. To use this we need to use vendor prefix code.

To disable the selection of a certain text, we need to create a CSS class. See the code below-

.unselect {
	user-select: none; /* Non-prefixed version for chorme, opera and*/
		-ms-user-select: none; /* Internet Explorer, Edge */
			-moz-user-select: none; /* Firefox */
				-khtml-user-select: none; /* Konqueror HTML */
					-webkit-touch-callout: none; /* iOS Safari */
						    -webkit-user-select: none; /* Safari */

Suppose you don’t want that user cant select text from specific elements. You can use the CSS class to that particular element. From this below example you can see the first DIV element has no unselect class, but 2nd DIV has. If you preview this in the browser, you can’t select 2nd DIV’s content.

<div> User Can Select The Text.</div>
<div class="unselect"> User Can Not Select The Text.</div>

Keep in mind user-select is currently in a W3C working draft. It means browsers can stop support for this code in future.

Spread the love
0 0 vote
Article Rating
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x