User-select controls whether text can be selected. It affects a browser interaction, not the document's content, permissions, or whether scripts can read that content.
Make this comfortable
CSS user-select: keep copyable data copyable
When to use it
An audit timeline has a drag handle beside each entry. Suppressing selection on that handle can prevent accidental highlighting during a drag, while case IDs and notes remain selectable for copying into a report. Do not apply user-select none to the whole card: reviewers may need an exact reference number, and touch users often rely on selection controls. The sample scopes the rule to the handle and explicitly keeps the record text selectable. Browser behavior and inheritance details vary, so test the actual control in the supported browsers. A drag interaction also needs pointer and keyboard behavior in the application; CSS alone does not create an accessible rearrangement workflow.
.audit-entry__drag-handle { user-select: none; cursor: grab; }
.audit-entry__reference { user-select: text; }Cost and verification
The declaration has negligible rendering cost. Its product cost can be high when a blanket rule blocks copy, lookup, or assistive workflows. Test selecting a partial reference with a mouse, selecting on touch, and copying the entire entry with a keyboard. User-select all is useful only where atomic selection matches the task; it can prevent partial extraction of long text. This property is not a content-protection feature. If a value is sensitive, enforce access at the data and service layer rather than hiding selection affordances.
Common Mistakes
- Do not disable text selection across a report or article.
- Do not treat user-select as a security control.
- Do not assume a drag handle is keyboard usable because it has a grab cursor.
Connected lessons
css
reference
web