How to prevent text from being selected on your website with CSS

There are pages where the text is not meant to be copied: games, interactive applications, or websites with an aesthetic focus. Having the browser select words when dragging the mouse can ruin the experience. With CSS (the language that defines the appearance of a website), selection can be disabled.

The code uses the selectors p, h1, h2, h3, h4, h5, h6, and covers all common text elements:

p, h1, h2, h3, h4, h5, h6 {
    /* Specific styles for all text elements */
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
}

Each line covers a browser: -webkit-user-select: none; for Safari, -ms-user-select: none; for Internet Explorer 10 and 11, and user-select: none;, the standard syntax for most modern browsers.

Once applied, the text of these elements will no longer be selectable.

If you use WordPress and don't want to touch the theme, you can insert it with a code snippets plugin, as I explain in How to remove items from the WordPress admin menu with Code Snippets. And to round off the experience, a great complement is the Day/night mode toggle button: aesthetics and user experience.