midCSS
What is the purpose of the user-select property?
Updated Apr 28, 2026
Short answer
It controls whether the text within an element can be highlighted and selected by the user.
Deep explanation
Setting user-select: none prevents double-click selection or dragging highlights over text. This is often used for UI controls (like buttons, tabs, or drag handles) where text selection feels like an accidental glitch rather than intentional behavior.
Real-world example
Preventing a button's text from being accidentally highlighted when a user double-clicks it quickly.
Common mistakes
- Using `user-select: none` on actual content (like articles or code snippets), frustrating users who want to copy-paste.
Follow-up questions
- What does user-select: all do?