Как запретить выделение текста

Короткий ответ

user-select: none запрещает выделять текст элемента мышью:

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

Это уместно для элементов управления: кнопок, вкладок, перетаскиваемых карточек, счётчика с кнопками «+» и «−». При быстрых двойных щелчках по ним текст иначе выделяется синим.

Выделить всё одним щелчком

Значение all выделяет содержимое целиком с первого щелчка — удобно для кода, ключа или промокода, который нужно скопировать:

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

Цвет выделения

Если хочется изменить не саму возможность выделять, а только вид выделенного текста, используйте ::selection:

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

Частая ошибка

Запрещают выделение всего сайта, чтобы «защитить» тексты от копирования. Это не защищает: текст доступен в коде страницы, в режиме чтения и через инструменты разработчика. Зато честным посетителям становится неудобно — нельзя скопировать адрес, номер телефона или цитату. Ставьте user-select: none только на элементы управления.