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.

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:

Change the Color of a Selected Text in CSS with One RuleYou can change the color and background of your text selection in CSS by using the pseudo ::selection selector globally or attached to an element.Learn More