user-select

Controlling whether the user can select text.

Overview

user-select controls ordinary user text selection. It does not prevent copying, protect confidential text or disable a control’s native action.

Examples

Disable selection on controls

Use user-select:none on a control label when dragging across it should not start a text selection. The checkbox still toggles normally.

<label id="target"class="inline-flex items-center gap-sm p-md       b:1px|solid|var(--color-line-base) r-sm user-select:none">  <input type="checkbox"> Snap objects to the grid</label>

@layer utilities {  .user-select\:none {    -webkit-user-select: none;    user-select: none  }}

Click or press Space on the checkbox to change its state. Keep selectable text in reading content; selection policy and activation behavior are separate.

Select a whole value

Use user-select:all for a short value that should be selected atomically. Try selecting only one word: the browser expands a selection within this element to the whole value.

<code id="target"  class="block p-sm b:1px|solid|var(--color-line-base) r-sm font-mono         user-select:all">pnpm install @master/css</code>

The initiating gesture varies by browser and input device. This property defines the selection boundary; it does not guarantee that a single tap or click always creates a selection.

Preserve normal reading selection

An explicit user-select:text restores partial text selection within this otherwise nonselectable region.

<div class="p-md b:1px|solid|var(--color-line-base) r-sm user-select:none">  <p class="font-xs text-muted">Panel label · selection disabled</p>  <p id="target" class="mb:0 user-select:text">Select only a few words from this sentence.</p></div>

Drag across a few words or use the platform’s text-selection gesture. The paragraph can be partially selected without selecting the surrounding label.

Apply conditionally

Use a checkbox to protect the paragraph from ordinary text selection. The selector targets a separate paragraph, so the trigger stays stable while you select.

<div class="user-select:none:has(>label>input:checked)>p">  <label class="flex items-center gap-sm mb-md">    <input type="checkbox"> Protect text from selection  </label>  <p id="target" class="mb:0 user-select:text">Select only a few words from this sentence.</p></div>

The readout follows the actual computed property. Clear an existing selection before comparing new gestures; changing selection policy is not a request to erase selection or clipboard data.