CSS User Select: настройка выбора пользователем элементов

CSS свойство user-select определяет, можно ли выбрать или выделить текст на веб-странице. По умолчанию, пользователь может выбирать и выделять текст на странице, но иногда это может быть нежелательным. В таких случаях, мы можем использовать свойство user-select, чтобы контролировать возможность выбора и выделения текста.

Значения свойства user-select:

1. none: Запрещает выбор и выделение текста.

Пример:

css
   .no-select {
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
     user-select: none;
   }
   

2. text: Разрешает выбор и выделение текста.

Пример:

css
   .selectable {
     -webkit-user-select: text; /* Safari */
     -moz-user-select: text; /* Firefox */
     -ms-user-select: text; /* Internet Explorer/Edge */
     user-select: text;
   }
   

3. all: Разрешает выбор и выделение всего содержимого элемента.

Пример:

css
   .select-all {
     -webkit-user-select: all; /* Safari */
     -moz-user-select: all; /* Firefox */
     -ms-user-select: all; /* Internet Explorer/Edge */
     user-select: all;
   }
   

4. auto: Возвращает значение выбора и выделения по умолчанию. Это значение позволяет браузеру самостоятельно решить, можно ли выбирать и выделять текст или нет.

Пример:

css
   .auto-select {
     -webkit-user-select: auto; /* Safari */
     -moz-user-select: auto; /* Firefox */
     -ms-user-select: auto; /* Internet Explorer/Edge */
     user-select: auto;
   }
   

Таким образом, свойство user-select позволяет нам контролировать возможность выбора и выделения текста на веб-странице, что может быть полезно для улучшения пользовательского опыта или для защиты контента от копирования и воровства.