CSS user-select Property

Definition and Usage

The user-select property controls whether the user can select text in an element with the mouse, touch, or keyboard.

The initial value is auto. Common values are none (block selection), text (allow selection), and all (select the whole element atomically). It does not affect browser chrome, except inside textboxes. Include -webkit-user-select for Safari.

CSS Syntax

Examples: none; · text; · all; · with prefix: -webkit-user-select: none;

Property Values

How to Use user-select

Pick a keyword, add the WebKit prefix for Safari, then try selecting the text.

1. Choose none, text, all, or leave auto.
2. Set both -webkit-user-select and user-select.
3. Apply it to controls (icons, buttons) or copyable blocks as needed.
4. Do not block selection on body text users may need to copy.

Live Preview

Change the value, then try selecting the sample text with your mouse or finger.

CSS Examples

Each snippet focuses on user-select. Include the WebKit prefix for Safari. Use Try It Yourself for a live editor.

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

<button type="button" class="btn">Click me</button>

<style>
  .copy {
    -webkit-user-select: text;
    user-select: text;
  }
</style>

<p class="copy">You can select and copy this paragraph.</p>

<style>
  .code {
    -webkit-user-select: all;
    user-select: all;
  }
</style>

<code class="code">npm install codetofun</code>

Key Takeaways