CSS Disable Text Selection Highlighting
learn how to Disable Text Selection Highlighting using CSS
Published
CSS Disable Text Selection Highlighting
Sometimes you are interested to not allow user to copy text from your website. So, there is not a standard solution to this requirement. Also, browser to browser it can vary with the solution. May in the future browsers can drop support for it.
Somehow we can achieve this using user-select property that is currently supported in all browsers except Internet Explorer 9 and earlier versions.
Following is the CSS that we can use. However, please note that user can copy the code from source code.
Example user-select CSS property
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
</style>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<p class="noselect">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
</body>
</html>