How to prevent the selection of content with CSS

In this article, we’ll learn how to prevent the selection of content with CSS, just using a simple and easy native language rule.

Hey you programmer, okay? Let’s learn something new!

Sometimes for privacy reasons, we want to opt out of the user being able to select the content.

This makes it possible for the user not to be able to copy our content, which is very useful.

And the good news is that it can be done via CSS, with the user-select property

So we should use it as follows:

.elemento {
 user-select: none;
}

Remembering that it must be applied to the element we want to avoid selecting

Well, we learned how to prevent content selection with CSS

However, we must be aware of the “Can I Use” of this property, which is not accepted in 100% of browsers, so use it carefully

And last but not least, only do this if it is extremely necessary.

Taking actions that limit behaviors commonly used by users, such as selecting content, can drive them away from your site

So unless it’s really necessary do it, otherwise think of another way to solve your problem, and don’t take this feature as your first action

Conclusion

In this article we learned how to disable text selection in the browser

For this we use the user-select property with the value none

But as warned in the post, always try to solve the problem in a way that doesn’t affect users, this can be frowned upon by them

Want to learn more about HTML and CSS? Click here!