3 min read
•Question 33 of 49easyHow Does user-select Work?
Controlling text selection behavior.
What You'll Learn
- user-select values
- Preventing selection
- Common use cases
Values
styles.cssCSS
.element {
user-select: auto; /* Default */
user-select: none; /* Cannot select */
user-select: text; /* Can select text */
user-select: all; /* Click selects all */
}Use Cases
styles.cssCSS
/* Prevent selection on buttons */
button {
user-select: none;
}
/* Prevent selection on icons */
.icon {
user-select: none;
}
/* Select all on click (code blocks) */
code {
user-select: all;
}
/* Prevent accidental selection on drag */
.draggable {
user-select: none;
}