CSS prohibits user selection
Disabling User Selection with CSS
In web development, sometimes we want to prevent users from selecting text on a page. This prevents them from copying content or disrupting the page layout. In CSS, we can use several properties to achieve this. This article will detail how to use CSS to prevent users from selecting text.
1. Using the user-select Attribute
The user-select attribute controls whether users can select text. This attribute has the following values:
none: The user cannot select text.auto: The user can select text.text: The user can only select text content and cannot select other elements.
Sample Code 1: Preventing Users from Selecting Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable user selection of text</title>
<style>
.no-select {
user-select: none;
}
</style>
</head>
<body>
<div class="no-select">This is a disabled text. </div>
</body>
</html>
Output:
In the above example, we added a class named no-select to the div element and set user-select: none;, so that users cannot select the text content within the div.
Running Result 1:
Users cannot select the text content within the div.
2. Using the selectable attribute
In addition to the user-select attribute, you can also use the selectable attribute to control whether an element can be selected.
Sample Code 2: Disallow User Selection of Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disallow User Selection of Elements</title>
<style>
.no-selectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div class="no-selectable">This is a disabled element. </div>
</body>
</html>
Output:
In the above example, we used -webkit-user-select: none;, -moz-user-select: none;, -ms-user-select: none;, and user-select: none; to prevent users from selecting the div element.
Running Result 2:
The user cannot select the div element.
3. Using JavaScript to Prevent Text Selection
In addition to CSS properties, you can also use JavaScript to prevent users from selecting text. By listening for the selectstart event and preventing the default behavior, you can achieve the effect of disabling text selection.
Sample Code 3: Using JavaScript to Disabling Text Selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabling Text Selection with JavaScript</title>
<script>
document.addEventListener('selectstart', function(e) {
e.preventDefault();
});
</script>
</head>
<body>
<div>This is a text that is disabled from selection. </div>
</body>
</html>
Output:
In the above example, we use JavaScript to listen for the selectstart event and call e.preventDefault() when the event is triggered to prevent the default behavior, thereby preventing the user from selecting text.
Running Result 3:
The user cannot select text on the page.
4. Use CSS pseudo-classes to prevent text selection
In addition to the above methods, you can also use CSS pseudo-classes to prevent text selection. The ::selection pseudo-class and the -moz-selection pseudo-class can prevent users from selecting text.
Sample Code 4: Using CSS Pseudo-Classes to Disable Text Selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using CSS Pseudo-Classes to Disable Text Selection</title>
<style>
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
</style>
</head>
<body>
<div>This is text that cannot be selected. </div>
</body>
</html>
Output:
In the above example, we use the ::selection pseudo-class and the -moz-selection pseudo-class to set the background color of the selected text to transparent, thereby preventing users from selecting the text.
Running Result 4:
The user cannot select text on the page.
5. Using JavaScript to Disable the Right-Click Menu
In addition to preventing text selection, sometimes we also want to prevent the right-click menu from popping up. By listening for the contextmenu event and preventing the default behavior, you can achieve the effect of disabling the right-click menu.
Sample Code 5: Disabling the Right-Click Menu Using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabling the Right-Click Menu Using JavaScript</title>
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
</script>
</head>
<body>
Try right-clicking the <div> element. </div>
</body>
</html>
Output:
In the above example, we use JavaScript to listen for the contextmenu event and call e.preventDefault() when the event is triggered to prevent the default behavior, thereby preventing the user from right-clicking the menu.
Running Result 5:
The user cannot pop up the right-click menu.
6. Using CSS to Prevent Dragging
Sometimes we also want to prevent users from dragging elements on the page. By setting the draggable property to false, you can disable dragging.
Example Code 6: Disabling Drag Using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabling Drag Using CSS</title>
<style>
.no-drag {
-webkit-user-drag: none;
user-drag: none;
}
</style>
</head>
<body>
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg" class="no-drag" alt="Image that cannot be dragged">
</body>
</html>
Output:
In the example above, we add a class named no-drag to the img element and set -webkit-user-drag: none; and user-drag: none; to prevent users from dragging the image.
Running Result 6:
The user cannot drag the image.
7. Disabling Copying with CSS
In addition to preventing text selection, sometimes we also want to prevent users from copying content on a page. This can be achieved by setting the -webkit-touch-callout property to none.
Sample Code 7: Disallow Copying with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disallow Copying with CSS</title>
<style>
.no-copy {
-webkit-touch-callout: none;
}
</style>
</head>
<body>
<div class="no-copy">This is a text to prohibit copying. </div>
</body>
</html>
Output:
In the example above, we add a class named no-copy to the div element and set -webkit-touch-callout: none; to prevent users from copying the text within the div.
Running Result 7:
Users cannot copy the text within the div.
8. Disable dragging of links using CSS
Sometimes we want to prevent users from dragging links to prevent them from being accidentally dragged to other locations. This can be achieved by setting the draggable property to false.
Sample Code 8: Disabling Draggable Links with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabling Draggable Links with CSS</title>
<style>
a.no-drag {
-webkit-user-drag: none;
user-drag: none;
}
</style>
</head>
<body>
Drag-disabled link
</body>
</html>
Output:
In the example above, we added a class called no-drag to the a element and set -webkit-user-drag: none; and user-drag: none; to prevent users from dragging the link.
Running Result 8:
Users cannot drag the link.
9. Disable Image Dragging with CSS
In addition to disabling links, sometimes we also want to prevent users from dragging https://coder-cafe.com/wp-content/uploads/2025/09/images. This can be achieved by setting the draggable property to false.
Sample Code 9: Disable Image Dragging with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Image Dragging with CSS</title>
<style>
img.no-drag {
-webkit-user-drag: none;
user-drag: none;
}
</style>
</head>
<body>
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg" class="no-drag" alt="Image that cannot be dragged">
</body>
</html>
Output:
In the example above, we add a class named no-drag to the img element and set -webkit-user-drag: none; and user-drag: none; to prevent users from dragging the image.
Running Result 9:
Users cannot drag the image.
10. Use CSS to Prevent Text Dragging
In addition to preventing the dragging of https://coder-cafe.com/wp-content/uploads/2025/09/images, sometimes we also want to prevent users from dragging text. This can be achieved by setting the draggable property to false.
Sample Code 10: Using CSS to Disable Draggable Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using CSS to Disable Draggable Text</title>
<style>
p.no-drag {
-webkit-user-drag: none;
user-drag: none;
}
</style>
</head>
<body>
<p class="no-drag">This is a text that disables draggability. </p>
</body>
</html>
Output:
In the example above, we add a class called no-drag to the p element and set -webkit-user-drag: none; and user-drag: none; to prevent users from dragging the text.
Running Result 10:
The user cannot drag the text.
Through the sample code above, we’ve detailed how to use CSS and JavaScript to prevent users from selecting, dragging, and copying content on a page, as well as disabling the right-click menu. These techniques can help us better control the interactive experience of the page and protect our content and layout from user interference. We hope this article is helpful!