user-select определяет, могут ли (и в какой степени) пользователи выбирать контент в элементе — следующий код демонстрирует различные допустимые значения и объясняет ограничения, налагаемые этими значениями. user-select не имеет ничего общего со «стилем».
выбор пользователя : текст ; // текст можно выбрать
user-select : none ; // текст can ' t быть выбран
пользовательский выбор : содержит ; // в пределах элемент
пользовательский выбор : все ; // все или ничего
пользовательский выбор : авто ; // зависит см. ниже …
< элемент > : до < элемент > : после {
выбор пользователя : авто ; // выбор пользователя : нет ;
}
< редактируемый элемент > {
выбор пользователя : авто ; // выбор пользователя : содержат ;
}
< любой другой элемент > {
пользовательский выбор : авто ;
// наследует «все» или «ничего»
// если нет наследование, то пользовательский выбор : текст ;
}
Содержание статьи
Префикс по выбору пользователя
Префикс необходим для максимальной поддержки веб-браузера (источник: caniuse.com).
-ms-user-select : < значение >; // интернет исследователь
-moz-user-select : < значение >; // firefox для android
-webkit-user-select : < значение >; // опера край сафари
Использование пользовательский выбор
Прежде чем мы подведем итоги, давайте рассмотрим вариант использования user-select в котором мы «блокируем» статью.
HTML
<article id = "article" > Lorem ipsum solor sit amet…
JavaScript
if ( articleShouldBeLocked ) {
const статья = документ . querySelector ( " #article " );
статья . classList . добавить ( " заблокировано " ); // используется для стилизации
статья . querySelectorAll ( « a » ). для каждого ( a => a . setAttribute ( « tabindex » » -1 " )); // пропустить фокусировку
документ . body . setAttribute ( " oncontextmenu " " вернуть false; " ); // блокируем контекстное меню, вызываемое правой кнопкой мыши
}
CSS
#article .locked {
непрозрачность : 0,5 ; // стиль
фильтр : размытие ( 0.5rem ); // стиль
пользовательский выбор : нет ; // блок выборки
указатель-события : нет ; // блок ссылка клики
}
Я что-то пропустил?
Ну, если бы я это сделал … тогда уже оставьте комментарий!
…
Buy Me A Coffee 😘
Загрузка...
