CSS user-select Property

Description

The user-select property controls whether and how the user can select text and other selectable content inside an element. It governs the interaction model for mouse, touch and keyboard gestures that produce text highlighting and selection handles, and therefore affects behaviors like dragging to highlight, double‑click to select a word, or shift+arrow key expansion of selection. Because selection is a direct part of the user interaction model, changing this property changes what users can copy, drag, or otherwise act upon with native selection gestures.

In practice authors use user-select to prevent accidental highlighting on interactive UI elements (for example, buttons, icons, or drag handles), to create a cleaner drag UX where selecting text would interfere, or to ensure that decorative UI text doesn’t appear selectable. That said, disabling selection can be surprising: users expect to be able to copy visible text, select input labels, and use platform selection features. It’s therefore commonly paired with other interaction-related rules (for pointer behavior and touch gestures) such as pointer-events, touch-action, or cursor to shape the overall affordance and response of an interactive element.

On a technical level user-select affects the visual and gestural selection layer rather than the underlying document content: it changes whether the user can create a selection range via the usual input methods. Scripted operations (the Selection and Range APIs) and platform accessibility tools may still be able to operate independently of the visual selection state depending on the platform. Also, when applied carefully, a parent’s selection rules and a child’s explicit selection rules interact so developers can allow selection in particular subregions (for example, making most of a toolbar unselectable while permitting selection in a nested code block or text field).

Because selection behavior is tied closely to copy/paste expectations and assistive workflows, the general best practice is to use user-select sparingly and only where it clearly improves usability (for example to avoid accidental highlighting during drag operations). Avoid disabling selection for primary content that users might reasonably want to copy or interact with, and test changes with keyboard navigation and assistive technologies. You can also complement selection control with styling of the selection appearance (the ::selection pseudo-element) or with semantic controls like contenteditable and ARIA attributes to preserve accessibility and clarity of intent.

Definition

Initial value: auto
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.userSelect

Interactive Demo

user-select: auto;

user-select: none;

User Select Demo

This text is always selectable

This text is not always selectable depending

Syntax

user-select: none | auto | text | all | contain

Values

noneText cannot be selected by the user.
autoThe default value. Text can be selected by the user.
textText can be selected by the user, but only within the element.
allText can be selected by the user, including text within other elements.
containText can be selected by the user, but only within the element and its descendants.

Example

HTML

<div class="demo">

    <h1>CSS user-select examples</h1>

    <p class="note">Try selecting (click and drag) the text in each area below.</p>



    <div class="grid">

        <div class="card select-auto">

            <h2>auto</h2>

            <p>Default selection behavior. You can select this text.</p>

        </div>



        <div class="card select-text">

            <h2>text</h2>

            <p>Allows selection of text inside the element.</p>

        </div>



        <div class="card select-none">

            <h2>none</h2>

            <p>This text cannot be selected.</p>

        </div>



        <div class="card select-all">

            <h2>all</h2>

            <p>Clicking or focusing selects all text inside this element.</p>

        </div>



        <div class="card select-contain">

            <h2>contain</h2>

            <p>Selection is contained within this element (browser-dependent).</p>

        </div>

    </div>

</div>

CSS

/* Layout and basic styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #f4f6f8;
    color: #1f2937;
    padding: 32px;
}

.demo {
    max-width: 980px;
    margin: 0 auto;
}

h1 {
    margin: 0 0 12px 0;
    font-size: 22px;
}

.note {
    margin: 0 0 20px 0;
    color: #4b5563;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.card {
    background: #ffffff;
    border: 1px solid #e6eef5;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.03);
}

.card h2 {
    margin: 0 0 8px 0;
    font-size: 16px;
}

.card p {
    margin: 0;
    line-height: 1.45;
}

/* Show selection color for visibility */
::selection {
    background: #3b82f6;
    color: #ffffff;
}

/* user-select examples with vendor prefixes for compatibility */
.select-auto {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.select-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.select-contain {
    -webkit-user-select: contain;
    -moz-user-select: contain;
    -ms-user-select: contain;
    user-select: contain;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS user-select property. Hover over a browser icon to see the version that first introduced support for this CSS property.