How to prevent copy text in your website with pure CSS

If you need to restrict the text selection in your website you are in the right place.

The user-select CSS property controls whether the user can select text. This doesn’t have any effect on content loaded as part of a browser’s user interface except in textboxes.

Values

• none: The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
• auto: The used value of auto is determined as follows:
  • On the ::before and ::after pseudo elements, the used value is none
  • If the element is an editable element, the used value is contain
  • Otherwise, if the used value of user-select on the parent of this element is all, the used value is all
  • Otherwise, if the used value of user-select on the parent of this element is none, the used value is none
  • Otherwise, the used value is text
• text: The text can be selected by the user.
• all: The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
• contain: Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

Quick demo

See the Pen Untitled by Carles Rider (@carlesrider) on CodePen.