/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile