User Select Property
Last updated: 2026-09-13
user-select User Select Property
The user-select property controls whether users can select text with the mouse. When set to none, text inside the element cannot be selected — commonly used for buttons, labels, and icons where copying is unnecessary, preventing accidental selection of unrelated content.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
user-select: auto | none | text | all;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | none | text | all | Keyword | The user's text selection behavior |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| user-select | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： user-select is not a standard CSS property, but browser support is widespread; for compatibility, also use the -webkit-user-select prefix.
Warning： Do not set user-select: none where users need to copy content (code blocks, quoted text) — it would hurt usability.
❓ FAQ
QWhat is the user-select: all value good for when copying text?
Aall lets a single click or the first selection select all of the text inside the element without dragging. It suits invitation codes, API keys, order numbers, and code snippets — anything that needs one-click select-all for copying, and it noticeably speeds up copying. Note that it overrides text/none on children: the whole block acts as a single selection unit.
QCan user-select: none prevent users from copying the page content?
ANo. It is a purely presentational limit: the text cannot be selected by dragging, but the content still exists in the DOM, and users can retrieve it through view source, developer tools, or even by disabling CSS. Real content protection must rely on backend permission control. user-select: none only improves the interface experience (avoiding accidental selection); it is not a security measure.
QWhat is the difference between user-select and the ::selection pseudo-element?
Auser-select controls whether text can be selected at all; ::selection controls what the selected text looks like — background color, text color, and so on. The two complement each other: user-select: text allows selection, and ::selection styles the selected state. Combine them to build branded selection effects.
QWhy do I need the -webkit-user-select prefix for user-select?
Auser-select was experimental for a long time. Modern browsers accept the unprefixed form, but Safari and older Chrome/Edge required -webkit-user-select. For compatibility with older engines, it is common to write all three lines: -webkit-user-select, -moz-user-select, and the unprefixed property.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
