CSS стиль user-select. Изменение выделения текста с помощью user-select
CSS стиль user-select управляет поведением выделения текста и других элементов на странице. Это незаменимое CSS свойство когда нужно запретить выделение текста.
Internet Explorer поддерживает свойство -ms-user-select.
Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select.
Firefox поддерживает свойство -moz-user-select.
Значение contain поддерживается только в IE.
Чаще всего CSS стиль user-select применяется для кликабельных интерактивных элементов, для которых нежелательно выделение текста.
Краткая информация по CSS-свойству user-select
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
Правила написания свойства user-select
user-select: auto | none | text | all | containПройдемся теперь по всем значениям.
auto — для редактируемых элементов значение принимается contain. Если у родительского элемента user-select установлено как all (none), то для элемента оно тоже будет all (none). Во всех остальных случаях принимается значение text.
none — пользователю запрещается выделять элемент.
text — пользователь может выделить текст в элементе.
all — позволяет выделить текст внутри элемента, включая дочерние элементы.
contain — позволяет выделять текст, но лишь внутри элемента.
Пример применения стиля user-select
Проиллюстрируем работу user-select на примере. Давайте сделаем так, чтобы верхний текст нельзя было выделить. Не забудьте про кроссбраузерное написание user-select.
Пример CSS стиля user-select body < -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; >.enable Ха! А этот текст нельзя выделить
Этот текст тоже выделяется
Популярные статьи
- unity
- слайдер
Как задать цвет выделения текста?
Выделение обычно применяется для копирования в буфер фрагмента текста, чтобы после этого вставить выделенный фрагмент в другое место. Например, в текстовый редактор для дальнейшей правки текста. Сам цвет и фон выделенного фрагмента определяется настройками операционной системы, но с помощью CSS эти параметры можно задать самостоятельно.
Чтобы указать цвет и фон выделенного текста применяется псевдоэлемент ::selection, в котором задаются свойства color и background, как покаано в примере 1.
Пример 1. Цвет выделенного текста
В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно волна ненаблюдаемо стабилизирует кварк
Результат данного примера показан на рис. 1.
Рис. 1. Цвет и фон выделенного текста
См. также
Управление выделением элементов на сайте при помощи CSS спецификации user-select
При верстке многих элементов часто появляется необходимость снять возможность их выделения. Иначе красиво оформленная кнопка изменяется визуально при случайном выделении.
Управлять выделением можно при помощи CSS спецификации user-select.
Управление выделением текста на странице при помощи user-select
Разберем несколько вариантов выделения. В первом варианте нам нужно сделать так, чтобы текст нельзя было выделить.
Для этого создадим абзац с текстом и добавим в него спецификацию user-select со значением none.
Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры
Второй вариант. Сделаем так, чтобы текст можно было выделить один нажатие и полностью.
Этот текст выделяется одним нажатием вместе с дочерними элементами.
Допустим у нас есть страница с текстом и изображениями. Нужно сделать так, чтобы мы могли выделить только текст без изображений.
В этом тексте находится изображение и при выделении текста изображение не выделяется.
Управление выделением других элементов
Если у вас есть кнопка, например, в контейнера и вы не хотите, чтобы она не выделялась вместе с текстом, при двойном нажатии на содержимое и другими возможными способами, то вы также можете использовать «user-select:none;».
Получается, что для любого элемента на HTML странице прописав спецификацию user-select мы можем управлять выделением.
Запрет вызова контектсного меню
Далеко не секрет, что если вы запретили выделение текста, то можно вызвать контектсное меню и через него обойти этот запрет. Поэтому идеальным решением будет запрет вызова контектсного меню. Это можно сделать с помоью jаvascript события «oncontextmenu=»return false;».
Выше также прописаны параметры user-select для браузера Mozilla и Chrome.
Таким образом, испозльуя CSS спецификацию user-select и событие jаvascript можно защитить свой контент от копирования. Но помните, что это решение не является идеальным и несложно обходится через панель разработчика. В крайнем случае можно просто сделать скриншот вашего текста и потом распознать его.
Выделение текста
Утилиты для управления возможностью выделения пользователем текста в элементе.
Используйте select-none , чтобы предотвратить выделение текста в элементе и его дочерних элементах.
Попробуйте выделить текст, чтобы увидеть ожидаемое поведение
Быстрая коричневая лиса прыгает через ленивую собаку.
div class="select-none . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>Используйте select-text , чтобы разрешить выделение текста в элементе и его дочерних элементах.
Попробуйте выделить текст, чтобы увидеть ожидаемое поведение
Быстрая коричневая лиса прыгает через ленивую собаку.
div class="select-text . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>Используйте select-all , чтобы автоматически выделять весь текст в элементе, когда пользователь щелкает мышью.
Попробуйте выделить текст, чтобы увидеть ожидаемое поведение
Быстрая коричневая лиса прыгает через ленивую собаку.
div class="select-all . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>Используйте select-auto , чтобы использовать поведение браузера по умолчанию для выбора текста. Полезно для отмены других классов, таких как select-none , в разных контрольных точках.
Попробуйте выделить текст, чтобы увидеть ожидаемое поведение
Быстрая коричневая лиса прыгает через ленивую собаку.
div class="select-auto . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : select-all , чтобы применять утилиту select-all только при hover .
div class="hover:select-all"> div> Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: select-all , чтобы применить утилиту select-all только на экранах среднего размера и выше.
div class="md:select-all"> div> Copyright © 2023 Tailwind Labs Inc.