CSS user-select Property

What You’ll Learn

The user-select property lets you allow or block text selection — useful for buttons, drag interfaces, and copy-friendly code snippets.

Introduction

The user-select property in CSS allows developers to control whether text can be selected by the user. This property is particularly useful for improving the user experience on web pages where selecting text might interfere with interactive elements or design layouts.

Definition and Usage

Apply user-select: none on UI controls like buttons, tabs, and draggable cards to prevent accidental blue highlights. Use user-select: all on tokens or code snippets when you want one click to select the entire value for copying.

📝 Syntax

The syntax for the user-select property is straightforward. It can be applied to any element and accepts different values to control text selection behavior.

element {
  user-select: value;
}

Basic Example

.no-select {
  user-select: none;
}

Syntax Rules

• Keyword values: auto, none, text, all, contain.
• The property is inherited by child elements.
• none on a parent blocks selection for descendants unless overridden.
• Older browsers used vendor prefixes; modern browsers support the standard property.

Related Properties

• cursor — changes the mouse pointer on hover
• pointer-events — controls whether an element receives pointer events
• -webkit-touch-callout — iOS callout menu on long-press (legacy)

🎯 Default Value

The default value of the user-select property is auto, allowing text selection unless overridden by specific CSS rules or browser settings.

💎 Property Values

The user-select property accepts keyword values that control selection behavior.

When to Use user-select

Choose a value based on how users should interact with the content:

• Buttons and toolbars — Use none to prevent label highlighting on click.
• Draggable cards — Avoid text selection fighting with drag gestures.
• API keys and code tokens — Use all for quick copy on one click.
• Articles and docs — Keep default selection so users can copy paragraphs.

Examples Gallery

In this example, we’ll disable text selection for a specific div element.

<style>
  .no-select {
    user-select: none;
  }
</style>

<div class="no-select">
  <p>Text inside this div cannot be selected.</p>
</div>

.blocked {
  user-select: none;
}

.btn {
  user-select: none;
  cursor: pointer;
}

.token {
  user-select: all;
  font-family: monospace;
}

♿ Accessibility

• Do not block article text — Users need to copy tutorials, error messages, and documentation.
• Keyboard selection — user-select: none affects mouse/touch selection; ensure critical content remains reachable.
• Provide copy affordances — If you use none on tokens, consider a dedicated Copy button as well.
• Avoid overuse — Disabling selection on large page regions harms usability and accessibility.

user-select + cursor

Pair user-select: none with cursor: pointer on clickable UI so users know the element is interactive, not static text.

.tab {
  user-select: none;
  cursor: pointer;
}

💡 Best Practices