The user-select CSS property specifies whether or not the text of an HTML element can be selected by the user.

To completely disable your user's ability to select text, you can use user-select: none;.

Although user-select has good browser support, using the property requires you to add vendor prefixes to your CSS code.

Here are all the CSS variations with the numerous vendor prefixes:

    
      .disable-selection {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, supported by Chrome & Opera */
      }
    
  

Since this isn't fully supported in all browsers, make sure you check the browser compatibility table before using this in production.

As always, thanks for reading and happy coding!