user-select

Controlling whether the user can select text.

Overview

Examples

Disable selection on controls

Use user-select:none for controls where accidental text selection makes the interaction feel broken.

<button class="user-select:none">    Drag handle</button>

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

Select all text in one click

Use user-select:all for short values that users commonly copy whole, such as tokens or command snippets.

<code class="user-select:all">pnpm install @master/css</code>

Preserve normal reading selection

Use user-select:text for article content, code examples, and any text users may need to copy partially.

<p class="user-select:text">Select part of this sentence.</p>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="user-select:none:hover user-select:text@sm user-select:auto@print">...</div>