CSS Make Text UnSelectable
If you are a developer or blogger, sometimes you have some type of text on your web page that you wish nobody can copy it. Because it’s very easy for anyone to copy any text from one place to another.
In that situation you can use the CSS Property to make the text unselectable.
Just like this:
You can’t copy this text.
So, we have make the above text unselectable using the CSS property. Neither you can select that text nor you can copy it.
There are two ways to make the text unselectable.
- User-select property (recommended)
- ::selection selector
In an Example below let’s write a code to make the text unselectable using user-select CSS property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
user-select: none;
}
</style>
</head>
<body>
<h1>This is an unselectable text</h1>
</body>
</html>
Make Text Selection Invisible
We can make the text selection invisible using ::selection selector.
Actually this doesn’t make the text unselected. The user can still select the text. But the background property with the value “RGBA(0, 0, 0, 0)” makes the text selection transparent and nobody knows whether we select the text or not.
In an example below let’s write a code to make the text selection transparent using ::selection selector.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1::selection {
background: rgba(0, 0, 0, 0)
}
</style>
</head>
<body>
<h1>This text has transparent text selection.</h1>
</body>
</html>
So this is how you can make the text unselectable.
Share This Post!
