CSS setting to disallow text copying

CSS settings prohibit copying

It can often be seen that the text on some website pages cannot be selected, and the text cannot be copied through the CSS style user-select and z-index attributes without js control.

user-select

Double-click or click to select the text in the browser, the text will be highlighted, and the css user-select attribute is used to set whether to allow the text of the selected element. This CSS has four attribute values.

• auto: Default. Go according to browser rules
• none: disable selection of text
• text: text can be selected by the user
• all: Click to select

z-index

Set the stacking order of elements, elements with higher stacking order will always be above elements with lower stacking order

1. Set the z-index order of a transparent full-screen div to the highest, so the underlying text cannot be copied

2. z-index property

   • auto: Default. The stacking order is equal to the parent element.
   • number: Use positive and negative numbers to set the stacking order of elements.
   • inherit: Specifies that the value of the z-index attribute should be inherited from the parent element.

ottfe