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.0

Leave a Reply

Your email address will not be published. Required fields are marked *