user-select: none prevents a user from selecting an element's text via the normal click-and-drag selection gesture, commonly applied to UI chrome like button labels, icons, or draggable interface elements where accidental text selection during a drag interaction would look visually distracting or interfere with the intended interaction. user-select: all instead makes an entire element's content get selected together as a single unit the moment any part of it is clicked, useful for something like a code snippet or license key that a user should be able to select and copy entirely with a single click, rather than needing to carefully drag-select the exact boundaries themselves.
1Understanding User-select
user-select: none prevents a user from selecting an element's text via the normal click-and-drag selection gesture, commonly applied to UI chrome like button labels, icons, or draggable interface elements where accidental text selection during a drag interaction would look visually distracting or interfere with the intended interaction. user-select: all instead makes an entire element's content get selected together as a single unit the moment any part of it is clicked, useful for something like a code snippet or license key that a user should be able to select and copy entirely with a single click, rather than needing to carefully drag-select the exact boundaries themselves.
Use user-select: none specifically on UI chrome, like button labels or icons in a drag-and-drop interface, where a user accidentally selecting that text during a drag gesture would look visually distracting or interfere with the interaction — but avoid applying it broadly to genuine content text a user would reasonably want to select and copy.
.button-label {
user-select: none;
}2Practical Example
Here is a real-world application of User-select showing how it is used in production CSS code.
.license-key {
user-select: all;
}
<code class="license-key">ABCD-1234-EFGH-5678</code>3Best Practices
Follow these guidelines when working with User-select:
1. Apply user-select: none specifically to interactive UI chrome where accidental text selection during interaction would be visually distracting, like button labels or drag handles
2. Use user-select: all for content like a code snippet, license key, or similar value meant to be selected and copied entirely with a single click
3. Avoid applying user-select: none broadly across genuine article or article-like content text, since users reasonably expect to be able to select and copy that kind of text
Tip: Use user-select: none specifically on UI chrome, like button labels or icons in a drag-and-drop interface, where a user accidentally selecting that text during a drag gesture would look visually distracting or interfere with the interaction — but avoid applying it broadly to genuine content text a user would reasonably want to select and copy.
.button-label {
user-select: none;
}