How to Make Text Unselectable Using CSS

It is important to secure personal information and private details on web pages. This type of information could be in various formats, such as images, videos, and text forms. The most unsafe form is text

because it is clear and easy to copy from one place to another. To tackle such situations, you can make the text unselectable using some special CSS selectors or properties.

This write-up will provide a detailed guide on how you can make some text unselectable in CSS

How to Make Text Unselectable Using CSS?

In CSS, to make text unselectable, we will use the following term:

user-select property
::selection selector

Let’s explore each property one by one!

Method 1: Make Text Unselectable Using CSS user-select Property

The “user-select” property decides the behavior of how the text of an element will be selected. When the “none” value is assigned to this property, it restricts the selection of text.

Let’s explore more about this property by checking out the example below.

Example

Currently, we have a text on our page in the selected state, and we want to make this text unselectable with the help of CSS:

In our HTML file, we will assign some text to the “<p>” tag and mention it inside the <body> tag.

HTML

<p>LinuxHint.io</p>

In the CSS file, simply utilize the “user-select” property with the value “none”.This will make the text unselectable respectively.

CSS

p{
user-select: none;
}

Now, save the mentioned code and open it in your favorite browser:

Want to learn something more interesting? Let’s move toward method two.

Method 2: Make Text Unselectable Using CSS ::selection Selector

In CSS, the “::selection” selector is used to style the selected part of an element. Only a few CSS properties can be utilized with this selector, such as background, color, outline, and cursor.

Example

Set the “::selection” selector with the <p> element. In the next step, specify the “background” property with the value “rgba(0, 0, 0, 0)”. This will make the text selection transparent.

Note: Using the combination of the specified selector and CSS property will still make the text selectable; however, no one will know whether the text is selected or not because of its transparency:

p::selection {
background: rgba(0, 0, 0, 0)
}

Output

We have covered the simplest methods to make text unselectable in CSS.

Conclusion

To make the text unselectable, the “user-select” property and “::selection” selector can be used. Simply setting the user-select property to none will make the text unselectable. Moreover, the ::selection selector can also be utilized with background property. In this post, you have learned how to make some text unselectable with the help of CSS

How to Make Text Unselectable Using CSS