AAtomic CSS

user-select

Controls text selection behavior. Prevents selection on UI elements or enables select-all with one click for easy copying.

Class List

ClassCSSDescription
usnuser-select: noneBlock text selection. For UI elements, buttons
usauser-select: autoBrowser default. Release parent usn in children
ustuser-select: textExplicitly allow text selection
usaluser-select: allSelect all with one click. For copyable code/keys

Visual Comparison

Try dragging to select text in each element. Selection varies.

None — usn

This text cannot be selected. Try dragging.

Text selection blocked. For buttons, tabs

Auto (default value) — usa

This text is selectable per default behavior.

Follows browser default selection behavior

Text — ust

This text is explicitly selectable.

Forces selectability even in parent with usn

All — usal

npm install atomic-css@latest

All text selected with one click. Convenient for copying!

Class Details

usnuser-select: none

Completely blocks text selection. Prevents text highlighting on drag in buttons, tabs, navigation.

<!-- Prevent button text selection -->
<button class="usn cp py8px px2rem bg6366F1 cFFFFFF br8px bn">
  Clickable but text selection disabled
</button>

<!-- Tab menu -->
<nav class="usn df gap2px">
  <button class="cp py8px px16px bg27272A cFAFAFA br4px bn">Tab 1</button>
  <button class="cp py8px px16px bg27272A cFAFAFA br4px bn">Tab 2</button>
  <button class="cp py8px px16px bg27272A cFAFAFA br4px bn">Tab 3</button>
</nav>

Common Combinations

usn cpSelection blocked + pointer cursor (button)
usn penSelection blocked + click disabled (disabled overlay)
usn df aic gap8pxSelection blocked + flex alignment (tab menu)

usauser-select: auto

Follows browser default. Re-enables selection in children when parent has usn.

<!-- Block selection on parent, allow on child -->
<div class="usn p2rem bg18181B br8px">
  <p class="cFAFAFA mb8px">This text cannot be selected</p>
  <p class="usa c71717A">This text can be selected again</p>
</div>

ustuser-select: text

Explicitly enables text selection. For making specific text selectable within a parent with usn.

<!-- Only specific text selectable within usn parent -->
<div class="usn p2rem bg18181B br8px">
  <p class="cFAFAFA mb8px">UI label (not selectable)</p>
  <code class="ust c38BDF8 bg1E1E2E py2px px8px br4px">Selectable code</code>
</div>

usaluser-select: all

Selects all text with one click. For code snippets, API keys, serial numbers.

<!-- Installation command for copying -->
<div class="bg0F0F17 b1pxsolid27272A br8px p16px">
  <code class="usal c34D399 fs14px cp">npm install atomic-css@latest</code>
</div>

<!-- API key copy -->
<div class="df aic gap12px bg18181B p16px br8px">
  <span class="c71717A fs14px">API Key:</span>
  <code class="usal c38BDF8 bg1E1E2E py2px px8px br4px fs14px cp">sk-abc123def456ghi789</code>
</div>

Usage Tip

usal improves UX with one-click copy. Use for install commands, license keys, code blocks.

Tips & Notes

Use usn only on UI elements

Use on buttons, tabs, navigation. Applying usn to body text degrades UX.

Improve copy convenience with usal

Apply usal to copyable text for one-click full selection.

Accessibility Note

usn may block keyboard selection (Shift+Arrow). Avoid on accessibility-important content.

pointer-eventscursor