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
How to disable text selection highlighting using CSS?
To disable text selection highlighting using CSS, you can prevent users from selecting and copying content. The CSS user-select property controls whether the user can select text within an element.
Syntax
selector {
user-select: value;
}
Possible Values
| Value | Description |
|---|---|
none |
Text cannot be selected by the user |
auto |
Default behavior, text can be selected |
text |
Text can be selected by the user |
all |
All content of the element will be selected atomically |
Example: Disabling Text Selection
The following example shows how to disable text selection on specific content using the user-select property
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable Text Selection Highlighting</title>
<style>
.selectable {
border: 2px solid blue;
padding: 10px;
margin: 10px 0;
user-select: auto;
}
.no-select {
border: 2px solid red;
padding: 10px;
margin: 10px 0;
user-select: none;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h3>Text Selection Control Demo</h3>
<div class="selectable">
This text can be selected normally. Try to select this content with your mouse.
</div>
<div class="no-select">
This text cannot be selected. The user-select: none property prevents text selection.
</div>
</body>
</html>
Two boxes appear: a blue-bordered box with selectable text and a red-bordered gray box where text selection is disabled. When you try to select text in the red box, no highlighting occurs.
Browser Compatibility
For better browser support, you may need to include vendor prefixes
<!DOCTYPE html>
<html>
<head>
<style>
.cross-browser-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 2px solid green;
padding: 15px;
background-color: #e8f5e8;
}
</style>
</head>
<body>
<div class="cross-browser-no-select">
This text is unselectable across all major browsers including older versions.
</div>
</body>
</html>
A green-bordered light green box appears with text that cannot be selected in any major browser.
Conclusion
The CSS user-select property provides an effective way to disable text selection highlighting. Use user-select: none to prevent content copying and include vendor prefixes for broader browser compatibility.
Updated on: 2026-03-15T17:32:13+05:30
9K+ Views
Advertisements