How to prevent text selection

Short answer

user-select: none forbids selecting the element's text with the mouse:

<p style="user-select: none;">Try to select this text — it will not work.</p>
<p>This text can be selected as usual.</p>

It suits controls: buttons, tabs, draggable cards, a counter with "+" and "−" buttons. Otherwise quick double clicks on them highlight the text in blue.

Selecting everything with one click

The all value selects the whole content on the first click — handy for code, a key or a promo code that needs to be copied:

<p>Your promo code: <code style="user-select: all; padding: 2px 6px; background: whitesmoke;">SPRING-2026</code></p>

The selection color

If you want to change not the ability to select but only the look of selected text, use ::selection:

<style>
  p::selection { background: gold; color: black; }
</style>
 
<p>Select this text to see the new colors.</p>

Common mistake

Selection is disabled for the whole site to "protect" the texts from copying. It does not protect anything: the text is available in the page source, in reader mode and through the developer tools. But honest visitors are inconvenienced — they cannot copy an address, a phone number or a quote. Put user-select: none only on controls.