user-select

user-select controls ordinary user text selection. It does not protect confidential text, prevent script access, or change keyboard focus and click behavior.

Compare selectable and nonselectable text

Drag across the two paragraphs. The first permits selection; the second suppresses it. The prefixed declaration keeps the comparison working in Safari versions that require it.

<p class="selectable">You can select this sentence.</p>
<p class="nonselectable">This sentence suppresses ordinary selection.</p>

.selectable {
  -webkit-user-select: text;
  user-select: text;
}
.nonselectable {
  -webkit-user-select: none;
  user-select: none;
}

Select a whole short reference value

All makes selection atomic: once a selection includes part of the code value, it includes the whole value. It does not promise that a single click selects or copies it in every browser.

<p>Try dragging or double-clicking the reference:</p>
<code>WORKSHOP-2026-09</code>

code {
  -webkit-user-select: all;
  user-select: all;
  display: inline-block;
  padding: 0.75rem;
  background: #eff6ff;
}

Values and inheritance

The initial value is auto. The specification makes the property non-inherited, but auto resolves from the parent’s used selection behavior in common cases. Engine inheritance differences have existed, so test explicit child overrides.

Text permits ordinary selection; none suppresses it; all selects the element’s content atomically. Contain is defined in the specification but is not an interoperable browser feature. It should not be presented as a working value alongside the others.

Browser support and usability

The current MDN compatibility data still records prefixed Safari support and unprefixed support in Safari Preview. Keep -webkit-user-select before the unprefixed declaration when supporting released Safari versions that need it.

Do not disable selection on articles, error messages, addresses, or code that readers may need to copy. A selection API can still include supposedly nonselectable content, and cursor appearance is a separate property. Learn cursor and code.

Sources and browser support

MDN: user-select describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.