References

Beginner-friendly references for web development, with live, editable examples.

The CSS user-select property

Property CSS All modern browsers Updated
Quick answer

The CSS user-select property controls whether text can be selected. The default is auto (selectable); user-select: none prevents selection, which is useful on buttons and UI labels where accidental highlighting looks messy. Use it sparingly — blocking selection of real content frustrates users who select text to read or copy it.

Overview

user-select decides whether a user can highlight an element's text. By default everything is selectable, which is exactly right for content — people select text to copy it, quote it, or just to track where they are reading. user-select: none switches that off for an element.

The legitimate use is interface chrome rather than content. Drag the corner of a resizable panel, double-click a button, or rapidly click a stepper, and you can accidentally select its label text, leaving an ugly blue highlight. Applying user-select: none to buttons, toolbar labels and drag handles keeps those interactions clean. The value all does the opposite, selecting the whole element in one click — handy for a "copy this code" snippet.

The temptation to overuse it — disabling selection across a whole page to "protect" content — is worth resisting. It does not actually prevent copying (the text is still in the source), and it blocks the many legitimate reasons people select text, including assistive tools. Keep it on the controls, not the content.

Syntax

/* stop labels being selected on double-click */
button, .label {
  user-select: none;
}

Values

The user-select property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
auto Normal text selection behavior. The default.
none Prevents the text from being selected.
all Selects the whole element with a single click.
text The content can be selected as text.

Example

Live example 
<style>
  .row { display: flex; gap: 10px; font: 600 14px system-ui, sans-serif; }
  .row div { padding: 12px 16px; border-radius: 8px; }
  .btn { background: #1c7ce9; color: #fff; user-select: none; cursor: pointer; }
  .copy { background: #eef2ff; color: #3730a3; user-select: all; }
</style>
<div class="row">
  <div class="btn">Not selectable</div>
  <div class="copy">click selects all</div>
</div>

Best practices

  • Use user-select: none on buttons, toolbar labels and drag handles to avoid accidental text highlighting during interaction.
  • Use user-select: all on copy-me snippets so a single click selects the whole value.
  • Leave real content selectable — people select text to read, copy and quote it, and assistive tools rely on it.
  • Do not use it as copy protection; the text is still in the page source, so it only inconveniences legitimate users.

Accessibility

Blocking text selection can get in the way of how some people use the web. Users with cognitive or reading difficulties often select or highlight text to help them focus and track their place, and others select content to paste it into a translation or text-to-speech tool. Disabling selection on actual content takes those options away.

So keep user-select: none scoped to non-content interface elements — buttons, handles, labels — where selection has no value anyway. Never apply it page-wide; the small visual tidiness is not worth the barrier it puts in front of readers who depend on selecting text.

Frequently asked questions

How do I prevent text selection in CSS?
Set user-select: none on the element. It is best used on UI controls like buttons and handles rather than on real content.
How do I make text selectable with one click?
Use user-select: all. A single click then selects the entire element, which is handy for code snippets or values meant to be copied.
Does user-select: none stop people copying my content?
Not really. The text is still in the page source and can be copied by other means. It mainly inconveniences legitimate users, so it is not effective copy protection.
Is disabling text selection bad for accessibility?
On real content, yes — some users select text to read, focus, or send it to a translation or speech tool. Keep user-select: none on interface chrome, not on content.
transition vertical-align