πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.

How to Disable Text Selection in CSS Using One Rule

Ferenc Almasi β€’ 2022 September 12 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

Use the user-select property in CSS to disable text selection on elements.

Copied to clipboard!
.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:

Change the Color of a Selected Text in CSS with One Rule
  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.