π±οΈ
Buttons and controls
Use none so button labels, tabs, and small UI controls do not get highlighted during fast clicks or drag gestures.
Learn user-select by trying it, not memorizing it
The fastest way to understand user-select is to drag, click, and compare the result. These demos keep the interaction simple so you can quickly decide when to prevent accidental highlighting, when to allow copying, and when to make an entire code block selectable in one click.
none
user-select: none
Try dragging across this text. You should not be able to highlight anything inside the block. This is useful when selection feels like a bug instead of a benefit, such as buttons, draggable chips, icon labels, or toolbar text.
Best fit: button labels, drag handles, icon-only controls with fallback labels, menus, tabs, game-like UI, and places where accidental text selection makes the interface feel messy.
user-select: none;
-webkit-user-select: none;
-webkit-user-select: none;
auto
user-select: auto
This behaves like ordinary page text. The browser decides the default selection behavior, which is usually exactly what you want for paragraphs, help text, documentation, and article content.
Best fit: body copy, blog posts, legal text, docs, onboarding instructions, and any area where users may want to highlight or copy naturally.
user-select: auto;
text
user-select: text
This block can always be selected. That matters when a parent container disables selection but a nested child still needs to stay copyable, such as a code token, error message, invoice ID, or support reference number.
Best fit: copyable snippets inside protected UI, serial numbers, license keys, stack traces, code samples, and troubleshooting details users may need to paste elsewhere.
user-select: text;
-webkit-user-select: text;
-webkit-user-select: text;
all
user-select: all
Click once or drag lightly. The whole block becomes selected as one unit. This is ideal when partial copying would be annoying and the user almost always wants the entire value.
Best fit: invite links, embed codes, terminal commands, API tokens, coupon codes, and any short block meant to be copied intact.
user-select: all;
-webkit-user-select: all;
-webkit-user-select: all;
contain
user-select: contain
Selection is intended to stay inside the element instead of spilling across nearby content. Support is limited in modern browsers, so many teams treat this as a progressive enhancement and test carefully before relying on it.
Best fit: experimental editor-like regions, isolated embedded widgets, or controlled content zones where you want to limit selection bleed β but only after checking support in your target browsers.
user-select: contain;
Use Cases
Where CSS user-select helps most
Most developers only think about text selection when it becomes annoying. Used intentionally, user-select helps polish interaction quality across marketing pages, apps, docs, and content products.
π
Copy blocks and commands
Use all when the user should copy the entire value in one move, especially for code, URLs, invite links, and promo text.
π
Docs and readable content
Keep content selectable with auto or text so people can quote, paste, or reuse useful instructions without friction.
π§©
Nested interactive UI
Mix none on the container with text on specific children when only part of a card or widget should stay copyable.
User-Select Workflow
A simple workflow for picking the right selection behavior
This quick frontend workflow helps you choose the property based on the real task, not just the CSS value name.
1
Identify the interaction
Ask whether the user is reading, clicking, dragging, editing, or copying. Selection should support that primary action.
2
Choose the least surprising value
Default to auto or text. Use none only when selection hurts the UX, and all only when full-block copy is the real goal.
3
Test nested states
Make sure parent and child elements behave correctly together. A disabled container may still need a selectable code sample or token inside it.
4
Check mobile and Safari
Verify touch selection, long-press behavior, and WebKit compatibility. Add -webkit-user-select when consistent behavior matters.
Best Practices
Practical rules that keep selection UX sane
Small CSS decisions can make a UI feel thoughtful or frustrating. These habits usually keep user-select working in your favor.
Prefer readable defaults
Start with auto. If users may want to quote, copy, or search the text, do not disable selection without a strong reason.
Use none for interaction polish, not fake protection
Donβt treat it as DRM. user-select: none can reduce accidental highlights, but it does not meaningfully stop copying.
Reserve all for short values
Keep it compact. Full-block selection feels great for commands and codes, but frustrating on long paragraphs users may want to partially copy.
Override parent restrictions intentionally
Use text on child nodes. This is the cleanest way to keep key snippets selectable inside otherwise locked-down interface components.
Test actual device behavior
Touch matters. Selection can feel different on mobile, especially in Safari, so verify long press and drag interactions on real screens.
Pair it with related UX CSS
Think in systems. user-select often works best alongside outline, caret-color, and readable content styling.
FAQ
Common questions about CSS user-select
These are the questions teams usually ask when they start tuning text selection in real product interfaces.
What does CSS user-select do?
It controls whether text inside an element can be selected. You can allow normal selection, disable it, force text selection on a child element, or make the whole block select as one unit.
When should I use user-select: none?
Use it on interactive UI where highlighted text feels accidental, like buttons, draggable cards, icon labels, tabs, or small navigation controls. Avoid using it on helpful content people may want to copy.
What is the difference between auto and text?
auto leaves selection behavior to the browser default. text explicitly allows selection and is especially useful when you need to override a parent element set to none.
Does user-select: all select everything automatically?
It makes the whole element select as a single block when the user interacts with it. That is ideal for short copy targets like commands, invite links, or tokens.
Is user-select: contain safe to rely on?
Not usually as a core behavior. Browser support is limited, so treat it as optional enhancement and test your target environments before depending on it.
Do I need the -webkit prefix?
For many production interfaces, yes. Adding -webkit-user-select helps smooth out behavior in Safari and iOS WebKit where selection UX often gets the most scrutiny.
Next Steps
What to do after you pick a user-select value
Use the property as part of a broader UX pass instead of treating it like a one-off tweak.
Build the UI, then ship the words that sell it
If this CSS page is part of a landing page, docs site, or product launch, the next bottleneck is usually content. The Content Creator Toolkit helps you turn a working interface into blog posts, social content, email copy, and conversion-focused page sections faster.