CSS sets the element to be unselectable
Setting Elements to Unselectable with CSS
In web development, sometimes we want certain elements to be unselectable by users to improve the user experience or protect the security of website content. In CSS, we can achieve this effect using some simple properties and techniques. This article will detail how to use CSS to set elements to be unselectable.
1. Using the user-select Attribute
The user-select attribute controls whether users can select the content of an element. You can prevent users from selecting the content of an element by setting user-select: none;. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
user-select: none;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the above example, the text within the element with the .disable-select class will not be selectable.
2. Using CSS Pseudo-Classes
In addition to the user-select attribute, we can also use CSS pseudo-classes to make elements unselectable. For example, we can use the ::selection pseudo-class to prevent text from being selected. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
::selection {
background-color: transparent;
color: inherit;
}
</style>
</head>
<body>
<div>This text cannot be selected.</div>
</body>
</html>
Output:
In the above example, when the user attempts to select the text, the background color of the text will become transparent, making it appear unselectable.
3. Using JavaScript
In addition to pure CSS methods, we can also use JavaScript to achieve the effect of making an element unselectable. By listening for the mousedown, selectstart, and contextmenu events, we can prevent the user from selecting the content of an element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
user-select: none;
}
</style>
<script>
document.addEventListener('mousedown', function(e) {
e.preventDefault();
});
document.addEventListener('selectstart', function(e) {
e.preventDefault();
});
document.addEventListener('contextmenu', function(e) { e.preventDefault();
});
</script>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the above example, JavaScript listens for events and calls the preventDefault() method to prevent the user from selecting the element’s content.
4. Use the -webkit-user-select CSS Property
In some browsers, you can use the -webkit-user-select property to control whether users can select an element’s content. Setting -webkit-user-select: none; prevents users from selecting an element’s content. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
-webkit-user-select: none;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the example above, setting -webkit-user-select: none; prevents users from selecting the element’s contents.
5. Using the -moz-user-select CSS Property
Similar to the -webkit-user-select property, the -moz-user-select property controls whether users can select an element’s contents in some browsers. Setting -moz-user-select: none; prevents users from selecting the element’s contents. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
-moz-user-select: none;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the above example, setting -moz-user-select: none; prevents users from selecting the element’s contents.
6. Using the -ms-user-select CSS Property
In Internet Explorer, you can use the -ms-user-select property to control whether users can select an element’s contents. Setting -ms-user-select: none; prevents users from selecting the element’s contents. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
-ms-user-select: none;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the above example, setting -ms-user-select: none; prevents users from selecting the element’s contents.
7. Using the -khtml-user-select CSS Property
In some KHTML browsers, you can use the -khtml-user-select property to control whether users can select an element’s contents. Setting -khtml-user-select: none; prevents users from selecting the element’s contents. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
-khtml-user-select: none;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the example above, setting -khtml-user-select: none; prevents users from selecting the element’s contents.
8. Using the -webkit-touch-callout CSS Property
On some mobile browsers, the -webkit-touch-callout property can be used to control whether the system default menu appears when the user long-presses an element. Setting -webkit-touch-callout: none; prevents the system default menu from appearing when the user long-presses an element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
-webkit-touch-callout: none;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the example above, setting -webkit-touch-callout: none; disables the default system menu from appearing when long-pressing an element.
9. Using the CSS property -webkit-tap-highlight-color
In some mobile browsers, the -webkit-tap-highlight-color property controls the highlight color when a user taps an element. Setting -webkit-tap-highlight-color: transparent; disables the highlight effect when tapping an element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the example above, setting -webkit-tap-highlight-color: transparent; disables the highlighting effect when clicking on the element.
10. Using the CSS property -webkit-user-drag
In some browsers, the -webkit-user-drag property controls whether users can drag an element. Setting -webkit-user-drag: none; disables user dragging of the element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
.disable-select {
-webkit-user-drag: none;
}
</style>
</head>
<body>
<div class="disable-select">This text cannot be selected.</div>
</body>
</html>
Output:
In the above example, setting -webkit-user-drag: none; prevents users from dragging the element.
Through the example code above, we can see how to use CSS and JavaScript to make elements unselectable. These methods can help us better control the selectability of web content, improve user experience, and protect website content security. I hope this article is helpful!