Disable Text Highlighting With CSS

css-examples css

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;
}

.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 */
Follow Me Subscribe To RSS Feed Subscribe To Email