How to prevent users from copying web page content using pure CSS

Preface

When I was typing my own personal blog, I wanted to have different ways of copying different contents on the blog details page. For example, I want readers to be able to copy the code block with just one click, which makes it easier for readers to debug locally. As for the text description part, I hope to not allow readers to copy it. As a staunch extremist who believes in using CSS over JS, I eventually found user-select in CSS3.

compatibility

user-select

Used to control whether the user can select text. Select all, Select some.

Select All

In many cases, users may want to copy complete content at one time, such as a piece of code, a password, or some keys.
user-select:all : Allows the user to select elements with a single click.
Here we demonstrate the effects under three different Html tags.

 h2 {
        user-select: all;
      }

      code {
        user-select: all;
        width: 500px;
        display: block;
        padding: 10px;
        color: #31808c;
        background-color: #f5f4ef;
      }

      div {
        user-select: all;
      }

  <h2>Click to try it</h2>
    <pre>
        <code>
        const num = 1;

        const result = (function () {
          delete num;
          return num;
        })();
        
        console.log(result);
        </code>
    </pre>
    <p>
      const num = 1; const result = (function () { delete num; return num; })();
      console.log(result);
    </p>

However, all also has an embarrassing shortcoming. As long as you set all, you cannot select some content.

Disable selection

For elements on a web page, you can use user-select: none; to prevent users from selecting content.

Partially selected

Why is there such a saying? For ordinary web pages, we can select specific content. For example, in the following page, we can partially select the content.

But the title part here mainly refers to the elements that cannot be selected on the opposite side. For example, there is a tag called sup in HTML, which is mainly used to add superscripts to elements.

<p>I have a corner mark behind me<sup>1</sup>I have a corner mark in front of me</p>

When you want to copy this text: I have a corner mark 1 behind me and I have a corner mark in front of me, this corner mark will also be copied.
At this point we need to set the corner mark. This setting can also ensure that when your p tag is user-select:all, the corner mark will be ignored when copied!

sup {
  -webkit-user-select: none;
  user-select: none;
}

Extension: Set the selected style

CSS provides the ::selection pseudo-element to style text selections You can style text selections by targeting the ::selection pseudo-element. However, only the following properties can be set:

color
background-color
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color (en-US)
text-shadow

For example

p::selection {
  color: #fffaa5;
  background-color: #f38630;
  text-shadow: 2px 2px #31808c;
}

The effect after selection is as follows:

This concludes this article on how to use pure CSS to prevent users from copying web page content. For more information on how to use CSS to prevent users from copying content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!