user-select
user-select controls whether text can be selected. It is useful for refining interaction in drag handles, buttons, or copyable content, but should be used carefully.
Overview
user-select controls whether text can be selected. It is useful for refining interaction in drag handles, buttons, or copyable content, but should be used carefully.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 54 | 79 | 69 | 3 | 54 | 3 | |
all | 53 | 79 | 1 | 16 | 53 | 16 |
auto | 1 | 12 | 1 | 2 | 18 | 3 |
none | 1 | 12 | 21 | 2 | 18 | 3 |
text | 1 | 12 | 1 | 2 | 18 | 3 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -ms- (12)
Removed
- This feature was removed in a later browser version (79)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (1)
Notes 2 item(s)
Removed
- This feature was removed in a later browser version (3)
Compatibility
- Available with a vendor prefix: -khtml- (2)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 2 item(s)
Removed
- This feature was removed in a later browser version (65)
Compatibility
- Available with a vendor prefix: -moz- (1)
Syntax
CSS
.no-select {
user-select: none;
}
.select-all {
user-select: all;
}Live demo
Use cases
Copy-friendly regions
Allow code, tokens, or identifiers to be selected cleanly when copying is part of the task.
Reducing accidental selection
Prevent stray text selection on draggable or repeatedly tapped controls.
Cautions
- Blocking selection on general content can frustrate users who need to copy, highlight, or use assistive workflows.
- Selection control should solve a real interaction problem rather than act as superficial lock-down.
Accessibility
- Text selection is a legitimate user need, so disabling it should be the exception, not the default.
Related links
Powered by web-features