W3docs
en
Log in

CSS user-select Property

The user-select CSS property defines the text selection. Read about property values and try examples.

The CSS user-select property controls whether the user can select text with the mouse, keyboard, or a long-press on touch devices. It does not change how text looks — it only affects the selection behaviour.

This page covers what each value does, when you would reach for user-select, the gotchas to watch out for, and runnable examples you can edit.

Why use user-select

Selecting text is a default browser behaviour, so most of the time you leave it alone. You change it deliberately in a few situations:

  • Stop accidental selection on UI controls — buttons, tabs, menu items, drag handles. When a user double-clicks or drags one of these, the browser highlights the label, which looks broken. user-select: none prevents that.
  • One-click copy for short strings like coupon codes, API keys, or commands. user-select: all selects the whole element on a single click so the user can copy it instantly.
  • Restore selection when a parent has turned it off but one child (an address, a code block) should still be selectable — set user-select: text on the child.

The default value is "auto" which is determined as follows:

  • On the ::before and ::after pseudo elements, the computed value is "none"
  • If the element is an editable element, the computed value is "contain",
  • If the computed value of user-select on the parent of this element is "all", the computed value is "all".
  • If the computed value of user-select on the parent of this element is "none", the computed value is "none",
  • Otherwise, the computed value is "text".
Info

Vendor prefixes (-webkit-, -moz-) are now obsolete in all modern browsers. The standard user-select property is fully supported without them.

Initial Valueauto
Applies toAll elements, though some values have no effect on non-inline elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.userSelect = "text";

Syntax

CSS user-select values

user-select: auto | none | text | all | contain | initial | inherit;

Example of the user-select property with the "auto" value:

CSS user-select code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: auto;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>
Try it Yourself »

In the given example, text can be selected if the browser allows it.

Example of the user-select property with the "none" value:

CSS user-select example prefixes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: none;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>
Try it Yourself »

The text cannot be selected.

Example of the user-select property with the "all" value:

CSS user-select all value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: all;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>
Try it Yourself »

Clicking anywhere in the element selects all the text within it — handy for one-click copy of codes or commands.

Example of the user-select property with the "text" value:

CSS user-select text value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: text;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>
Try it Yourself »

Text can be selected normally by the user. This value is useful for re-enabling selection on a single child when an ancestor has set user-select: none.

Things to keep in mind

  • user-select: none is not a security feature. It only blocks the casual mouse/keyboard selection — the text is still in the DOM and fully accessible to "View Source", screen readers, and copy via the keyboard in many browsers. Never use it to "protect" content.
  • It does not disable copying programmatically or via right-click → Copy in every browser. If you truly need to block copy, you must handle the copy event in JavaScript — but think hard about whether you should.
  • Inherited? No. user-select is not inherited in the usual sense, but its computed value depends on the parent (see the "auto" rules above), so setting none on a container effectively affects its descendants.
  • Pair it with pointer-events thoughtfully. They solve different problems: user-select controls text highlighting, while pointer-events controls whether an element responds to mouse/touch at all.

Values

ValueDescriptionPlay it
autoText can be selected if the browser allows it. This is the default value of this property.Play it »
noneText is not selected.Play it »
textText is selected by the user.Play it »
allText is selected by one click.Play it »
containText can be selected, but the selection cannot extend beyond the element's boundaries. Typically used for editable elements.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice
Which statement is correct about CSS user-select property?
Which statement is correct about CSS user-select property?
  • pointer-events — control whether an element reacts to mouse and touch events.
  • cursor — change the mouse pointer shown over an element.
  • ::before and ::after — the pseudo-elements whose user-select computed value is always none.
Was this page helpful?