Disable selection

OSCC · CSS, Interactivity · Dec 30, 2020

Makes the content unselectable.

  • Use user-select: none to make the content of the element not selectable.
  • Note: This is not a secure method to prevent users from copying content.
Preview

You can select me.

You can't select me!

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
.unselectable {
  user-select: none;
}

Recommended snippets

  • Horizontal scroll snap

    CSS, Interactivity

    Creates a horizontally scrollable container that will snap on elements when scrolling.

  • Vertical scroll snap

    CSS, Interactivity

    Creates a scrollable container that will snap on elements when scrolling.

  • Input with prefix

    CSS, Interactivity

    Creates an input with a visual, non-editable prefix.