CSS Property: user-select
[this page | pdf | back links]
The CSS (CSS3) user-select property indicates whether
text of an element can be selected. If you (double) click on some text it will
typically be selected, and this property stops this happening.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
auto
|
(default value). Text
can be selected by user (if allowed by browser)
|
|
none
|
Text can’t be selected
by user
|
|
text
|
Text can be selected by
user
|
|
Default Value:
|
auto
|
|
JavaScript syntax:
|
e.g. object.style.userSelect="none"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 200px; border: thin solid green;}
div.x1 {user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;}
</style>
</head>
<body>
Try selecting text within each box:
<div>Element with default property</div><br>
<div class="x1">Property set using HTML</div><br>
<div id="x2">Property set using JavaScript</div>
<script>
document.getElementById("x2").style.userSelect = "none";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyUserSelect() {
var x = document.createElement("DIV"); x.style.userSelect = "none"; return (window.getComputedStyle(x, null).userSelect == "none");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties