CSS user-select Property

February 10, 2021 12:37 pm IST

You are Here:

CSS user-select Property

CSS user-select property controls whether the user can select text.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ user-select:none; } </style> </head> <body> <p id="point">You can't select this text</p> </body> </html>

Run

Syntax

Using CSS

element{ user-select: none; }

Using Javascript

object.style.userSelect="none";

Animatable

No, user-select property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS user-select property is auto.

Property Value

The following table provides a list of values for CSS user-select property.

Value	Explanation
none	The text of the element and its sub-elements is not selectable.
auto	The text of the element and its sub-elements are selectable if the browser allows it.
text	The text can be selected by the user.
all	The text of the element and its sub-elements will be select with 'one click' instead of a double-click.

All in One

In the following example, we will demonstrate all values of CSS user-select property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ user-select: none; } #point1{ user-select: auto; } #point2{ user-select: text; } #point3{ user-select: all; } </style> </head> <body> <p id="point">You can't select this text.</p> <p id="point1">Select me, if your browser allows.</p> <p id="point2">Select me, (only text).</p> <p id="point3">just click me to select all.</p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS user-select property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h2>CSS user-select Property</h2> <p id="point">This is a paragraph</p> <button onclick="myFunction()">Click Me</button> <script> function myFunction(){ var x = document.getElementById("point"); x.style.userSelect = "none"; } </script> </body> </html>

Run