user-select: none prevents ordinary text selection in the affected area. It can help on a decorative drag handle or repeated control label, but it makes articles, instructions and addresses harder to copy. Use it narrowly.

Working example

Select the instruction and compare the handleLink

HTML and CSS

HTML

<span class="handle" aria-hidden="true">⋮⋮</span>
<p>This instruction remains selectable. Drag across its words to check.</p>

CSS

.handle {
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid #64748b;
  padding: 0.5rem;
  display: inline-block;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

The handle is decorative; this example does not implement dragging. The paragraph remains selectable because the rule only matches .handle.

Selection is different from its appearance

To change the color of a selection, use ::selection. To restrict whether a user can select text, use user-select. These are separate decisions.

Selection rules do not protect confidential information. The text remains in the document and can be read or copied through other tools. Browser behavior around editable controls and nested selectable content has details worth testing on your supported browsers.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.