CSS user-select Playground

The user-select CSS property controls whether and how users can select text within an element. It determines if text can be highlighted, copied, or interacted with via cursor selection. This property is especially useful for improving UX on interactive elements like buttons, drag-and-drop interfaces, code snippets, and any scenario where accidental text selection could degrade the experience. Supported values include auto (browser default), text (selection enabled), none (selection disabled), and all (one-click select-all).

Use user-select: none; along with browser vendor prefixes for full coverage. The complete CSS rule is:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

This prevents users from highlighting text within the target element. It's commonly used on buttons, navigation menus, icons, and drag handles to avoid accidental text selection during interaction. Note that this does not prevent copying via other means (like View Source) — it only affects cursor-based selection.

user-select: all makes the entire text content of an element selectable in a single action. When a user starts selecting anywhere inside the element, the browser automatically expands the selection to encompass all text within that element. This is ideal for:

• Code snippets & commands — users can copy with one click
• API keys, tokens, or URLs — reduce friction when copying
• Error messages — let users quickly copy error codes
• Short quotes or references — convenient one-click copying

Note: In most modern browsers, a double-click or click-drag within the element triggers the full selection automatically.

These are fundamentally different properties:

user-select: none — Only prevents text selection. The element still receives clicks, hover states, focus, and all other pointer interactions. It's purely about text highlighting.

pointer-events: none — Makes the element completely transparent to mouse/touch events. Clicks pass through to elements behind it. The element won't receive hover, focus, or any interaction. Text inside may still be selectable if the selection starts from a neighboring element.

Use user-select: none for buttons and UI elements. Use pointer-events: none for decorative overlays or when you need clicks to pass through.

When a parent element has user-select: none, all child elements inherit this behavior. To re-enable selection for specific children, apply user-select: text (with prefixes) to those child elements:

.unselectable-card { user-select: none; }
.unselectable-card .copyable-content { user-select: text; }

This pattern is useful for card UIs where the card itself shouldn't be selectable, but certain content areas (like code blocks or addresses) should be copyable.

Yes, user-select works on mobile browsers including iOS Safari and Android Chrome. However, mobile behavior has some nuances:

• Touch vs. long-press: On mobile, text selection is typically triggered by a long-press gesture. user-select: none prevents the text selection popup from appearing.
• iOS Safari: Fully supports all values with the -webkit- prefix since iOS 16.
• Android Chrome: Supports all values, also requiring -webkit- prefix.
• all value on mobile: A tap or long-press within the element should select all text, though behavior may vary slightly across browsers.

Always test on real devices to ensure the expected behavior.

For maximum browser compatibility, include all three vendor prefixes before the standard property:

-webkit-user-select: <value>; /* Chrome, Safari, Opera, Edge */
-moz-user-select: <value>; /* Firefox */
-ms-user-select: <value>; /* Internet Explorer / legacy Edge */
user-select: <value>; /* Standard syntax */

As of 2024, the -ms- prefix is largely unnecessary for modern browsers, but it's still recommended for legacy Edge (versions 12-18) and Internet Explorer support. If you don't need IE/legacy Edge support, you can safely omit the -ms- prefix.

user-select: none only prevents visual text selection via cursor/touch. It does not prevent determined users from copying content through other methods:

• Using browser DevTools to inspect and copy text
• Viewing the page source (Ctrl+U / Cmd+U)
• Disabling CSS in the browser
• Using JavaScript to extract text content
• Taking a screenshot and using OCR

If you need stronger protection, consider serving content as images, using canvas rendering, or implementing DRM — though these approaches have significant UX trade-offs and are rarely recommended for general web content.

user-select: contain was part of an early draft of the CSS UI Level 4 specification. The idea was that selection would be confined to the element's boundary — you couldn't accidentally extend selection into neighboring elements. However, this value was removed from the specification and is not supported by any modern browser. The current valid values are auto, text, none, and all. If you encounter code using contain, it's outdated and should be replaced with one of the standard values.

No, user-select is a discrete property — it has distinct, non-interpolable values. You cannot smoothly transition or animate between none and text because there are no intermediate states. If you need a visual transition effect (e.g., fading in selectable text), consider animating other properties like opacity, color, or using CSS transitions on a wrapper element while toggling user-select instantly via JavaScript at the appropriate moment.