Codectionary / Developer documentation / CSS

Controlling Text Selection with user-select

user-select adjusts whether and how text can be selected. all requests atomic selection of an element’s content, while none suppresses normal text selection. It does not prevent copying through scripts or developer tools and should not be treated as content protection.

Syntax

.reference { user-select: all; }

Examples

Controlling Text Selection with user-select: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.reference { user-select: all; padding: .3rem; background: #e0e7ff; }
  1. Expected result: Selecting part of the reference requests selection of the entire reference in supporting browsers.
  2. The surrounding explanatory prose retains ordinary selection behavior.
  3. Behavior and prefixes can differ in older engines, so test required browser versions.
HTML used by this example

<p>Reference: <code class="reference">ORDER-2026-0042</code></p><p>Select the reference to copy it as one unit.</p>

Best practices

  • Preserve selection for prose and information users may need to copy.
  • Offer an explicit copy control when copying is a primary workflow.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading