How to disable text selection with CSS?

How to disable text selection with CSS?

To disable text selection we use the CSS property user-select and apply the value to it as none.

we have to use a couple of more CSS properties because the common single property is not supported by all the browsers.

Applying this CSS will make text in the element non-selectable and the user will not be able to select that text through the screen.

We can use this CSS and apply it to a class and then we can apply that class to the places where we want to disable the text.

CSS :-

    .disable {
       user-select: none;
       -webkit-user-select: none; 
       -ms-user-select: none;
    } 

HTML :-

    <p>This text can be selected.</p>
    <p class="disable">This text cannot be selected, it is disabled.</p> 

Output :-

In the CSS syntax, we have created a class with the name disable. We have applied the user-select property and given it the value of none.

Similarly, we have added 2 more CSS properties that will be useful in the browsers Mozilla and Internet Explorer.

In the HTML code, we have created two paragraphs. The first one is the default paragraph and it is not disabled, the user will be able to select this paragraph. The second paragraph has been given the class disable which will prevent the user from selecting the text from this particular paragraph.

In the output image, we can see that the first paragraph is selectable & we have selected the first paragraph whereas the second paragraph is non-selectable & the user will not be able to select the text within this paragraph.

Recap

With the help of a practical example, we have demonstrated How to disable text selection with the help of CSS.

You can try this code and check the practical example by practicing it by yourself.