EN
CSS - disable text selection
18
points
Using CSS it is possible to remove text selection in the following way:
Quick solution:
.element {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox in the past (old versions) */
-ms-user-select: none; /* Internet Explorer (>=10) / Edge */
user-select: none; /* Currently supported: */
/* Chrome, Opera and Firefox */
}
Notes:
- some older browsers still does not support
user-select
property, so it is necessary to use prefixes for full capability (Can I use link here),user-select
property is part of CSS4 standard.
Practical example
This approach removes text selecting option from element with CSS. Read this article to prevent more cases.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.disable-selection {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox in the past (old versions) */
-ms-user-select: none; /* Internet Explorer (>=10) / Edge */
user-select: none; /* Currently supported: */
/* Chrome, Opera and Firefox */
}
div {
margin: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="disable-selection" style="background: silver">
This text is not selectable ...
</div>
<div style="background: gold">
This text is selectable ...
</div>
</body>
</html>