Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set whether the text of the element can be selected or not with CSS
Use the CSS user-select property to control whether the text content of an element can be selected by the user. This property is useful for preventing text selection in UI elements like buttons, navigation menus, or decorative text.
Syntax
selector {
user-select: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default behavior - text can be selected |
none |
Text cannot be selected |
text |
Text can be selected |
all |
All content is selected with a single click |
Example: Preventing Text Selection
The following example demonstrates how to prevent text selection using user-select: none −
<!DOCTYPE html>
<html>
<head>
<style>
.selectable {
background-color: #e7f3ff;
padding: 10px;
margin: 10px 0;
border: 1px solid #b3d9ff;
}
.non-selectable {
background-color: #fff2e7;
padding: 10px;
margin: 10px 0;
border: 1px solid #ffb366;
user-select: none;
}
</style>
</head>
<body>
<h3>Normal Text (Selectable)</h3>
<div class="selectable">Try to select this text - it will work normally.</div>
<h3>Non-Selectable Text</h3>
<div class="non-selectable">Try to select this text - you won't be able to select it.</div>
</body>
</html>
Two text blocks appear: the first (blue background) allows normal text selection, while the second (orange background) prevents any text selection when you try to click and drag.
Example: Select All on Click
The user-select: all value selects the entire content with a single click −
<!DOCTYPE html>
<html>
<head>
<style>
.select-all {
background-color: #f0f8e7;
padding: 15px;
border: 2px solid #8bc34a;
user-select: all;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Click to Select All</h3>
<div class="select-all">Click anywhere in this text and the entire content will be selected automatically.</div>
</body>
</html>
A green-bordered text block appears. Clicking anywhere inside it automatically selects the entire text content.
Conclusion
The user-select property provides fine control over text selection behavior. Use none for UI elements and all for content like code snippets or URLs that users typically need to copy entirely.
Updated on: 2026-03-15T13:30:53+05:30
177 Views
Advertisements