How to Disable Text Selection in CSS Using One Rule
Use the user-select
property in CSS to disable text selection on elements.
.element {
user-select: none;
-webkit-user-select: none;
}
Take a look at the following example, where the text on the left can be selected, the text on the right however has the user-select
rule applied which prevents selection altogether.
Try to select me to see you will have no problem doing so!
Try to select me, however, you won't be able to.
According to caniuse, This CSS property is widely supported in all major browsers, however, to make it work in Safari too, you need to use the -webkit-
prefix as of the writing of this article.
Want to keep the selection but change the selection color? Check out the following tutorial on how to achieve it:


Tired of looking for tutorials?
You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.
Check out our interactive course to master JavaScript in less time.
Learn MoreRecommended

How to Save Writable Store in Svelte to Local Storage
Learn how to create a persistent store in Svelte

How to Create an Infinite Scroll Component in React
With the help of the Intersection Observer API
