EN
HTML - how to disable text selection?
23
points
In this article, we would like to show how by using HTML, JavaScript and CSS it is possible to disable text selection on any web site element.
Practical example
The below approach works under almost each one web browser. It blocks text and elements selection by using:
- CSS class (
disable-selection
defined in example code) unselectable="on"
attribute (it is required by IE < 10 and Opera < 15)onselectstart="return false"
(it is additional solution for Internet Explorer web browsers family)
Notes:
- some browsers still don't support
user-select
property (Can I use link here), so it is necessary to use prefixes for full capability.- in CSS3,
user-select
property is not part of the standard - it has working draft status for CSS4.
// 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"
unselectable="on"
onselectstart="return false">
This text is not selectable ...
</div>
<div style="background: gold">
This text is selectable ...
</div>
</body>
</html>