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 fulfill 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 for that particular element. From this example, you can see that 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>If we apply it to the parent element, it will also affect on child elements.
Keep in mind user-select is currently in a W3C working draft. It means browsers can stop support for this code in the future.
If you are having trouble making this selection work, please ensure that you are applying the CSS directly to the desired elements and not through a style-sheet link or anything else. Also, try to reload/refresh your browser after adding this snippet in case it doesn’t work properly the first time around. If nothing is working then you might need to use an alternative method.
