CSS: отключаем выделение текста
отключаем для пользователей возможность выделить текст с помощью CSS

Попробуем отключить возможность выделения текста (как впрочем и всего остального содержимого веб-страницы) с помощью CSS-свойства user-select
.
По умолчанию броузеры позволяют нам выбирать текст с помощью клавиатуры, например: нажав комбинацию CMD + A
на устройствах с macOS, CTRL + A
в случае, если Вы используете Windows, а также, просто, благодаря мыши или тачпаду.
Добавив элементу правило user-select: none
, Вы отключите такую возомжность.
Только не забывайте про префиксы для различных броузеров. Внимательно изучите документацию на MDN и caniuse:
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Иногда проще отключить выбор содержимого для всей страницы, добавив такую возможность только для некоторых элементов, по мере необходимости:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.selectable-text {
user-select: text;
}
Спасибо за внимание.