CSS
🎯 CSS user-select Property (Text Selection Control)
The user-select property in CSS controls whether text can be selected by the user.
It defines if users can highlight, copy, or interact with text selection using the mouse.
This is commonly used in UI components such as buttons, cards, headers, or code blocks.
💬 Simple Explanation
By default, text on websites is selectable.
However, in some UI elements like logos or buttons, selection may not be desired.
The user-select property allows you to control this behavior.
🔹 Basic Usage
p {
user-select: none;
}
➡️ In this example, the text cannot be selected or copied.
🧩 Examples
1. none (Unselectable Text)
<p style="user-select: none;">
This text cannot be selected.
</p>
➡️ The text cannot be highlighted or copied.
2. text (Selectable Text)
<p style="user-select: text;">
This text is selectable.
</p>
➡️ The user can select and copy the text normally.
3. all (Select All at Once)
<p style="user-select: all;">
Clicking selects the entire text.
</p>
➡️ Clicking once selects all text inside the element.
💡 Values
| Value | Description |
|---|---|
| auto | Default browser behavior |
| none | Text cannot be selected |
| text | Text can be selected normally |
| all | Selects entire text at once |
| initial | Resets to default value |
| inherit | Inherits value from parent |
-
🧠 Summary
- The user-select property controls whether text can be selected.
- It is commonly used in UI components to improve user experience.
- Main values:
- none → disables selection
- text → enables normal selection
- all → selects all text instantly
- This property helps control interaction behavior and improve UI control in modern web design.