Use the user-select
CSS property to control text selection behavior. This is useful for UI elements like buttons, navigation, and interactive components where text selection would interfere with user experience.
Basic Usage
.no-select {
user-select: none;
}
Common Use Cases
Buttons and Interactive Elements
button,
.btn {
user-select: none;
}
Navigation Menus
.navbar,
.menu {
user-select: none;
}
Code Examples (Allow Selection)
pre,
code {
user-select: text;
}
All User-Select Values
.auto {
user-select: auto;
} /* Default behavior */
.none {
user-select: none;
} /* Disable selection */
.text {
user-select: text;
} /* Allow text selection */
.all {
user-select: all;
} /* Select entire element */