user-select. Выделение текста в CSS
CSS стиль user-select управляет поведением выделения текста и других элементов на странице. Это незаменимое CSS свойство когда нужно запретить выделение текста. Настольные Мобильные| Internet Explorer | Chrome | Opera | Safari | Firefox |
|---|---|---|---|---|
| 10 | 4 | 15 | 3.1 | 2 |
| Android | Firefox Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|
| 2.1 | 2 | 30 | 3.2 |
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 установлено как
none — пользователю запрещается выделять элемент.
text — пользователь может выделить текст в элементе.
all — позволяет выделить текст внутри элемента, включая дочерние элементы.
contain — позволяет выделять текст, но лишь внутри элемента.
Пример применения стиля user-select
Проиллюстрируем работу user-select на примере. Давайте сделаем так, чтобы верхний текст нельзя было выделить. Не забудьте про кроссбраузерное написание user-select.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля user-select</title>
<style>
body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.enable {
-ms-user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
user-select: all;
}
</style>
</head>
<body>
<p>Ха! А этот текст нельзя выделить</p>
<p><input type="text" value="Этот текст выделяется"></p>
<p>Этот текст тоже выделяется</p>
</body>
</html>Использование CSS для управления выделением текста
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа.
Это может помочь улучшить юзабилити в определенных ситуациях и добавить немного визуального чутья.
Выделить всё
Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).
Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!
div {
-webkit-user-select: all; /* для Safari */
user-select: all;
}Например, так:
See this code Select All on x.xhtml.ru.
Выделить всё… Затем выделить часть
Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.
Во-первых, надо использовать tabindex, чтобы сделать HTML-элемент, содержащий текст, доступным для фокусировки.
Это позволит CSS узнать о клике по HTML-элементу.
<code tabindex="0">Это фрагмент кода</code>
Теперь немного CSS.
code {
-webkit-user-select: all;
user-select: all;
}
code:focus {
animation: select 100ms step-end forwards;
}
@keyframes select {
to {
-webkit-user-select: text;
user-select: text;
}
}Идея состоит в том, чтобы сначала установить для HTML-элемента CSS-свойство user-select: all, а затем, когда фокус переместится на этот элемент, переключиться на «обычный» user-select: text, чтобы текст можно было выбирать по частям. Выбор времени переключения — дело непростое. Если сделать переключение сразу после перемещения фокуса на элемент, то от user-select: all не будет никакого эффекта, т.к. оно успеет сменить значение на animation.
CSS-свойство user-select можно анимировать. Оно дискретно анимированное, это означает, что нет постепенной интерполированной анимации, по истечении указанного времени происходит немедленный переход от одного состояния к другому.
Поэтому, можно использовать animation, чтобы отложить изменение поведения выделения текста до 100 миллисекунд после передачи фокуса HTML-элементу.
See this code Select All… Then Select Some on x.xhtml.ru.
Предотвращение выделения текста
CSS можно использовать ещё и для того, чтобы сделать текст в элементе недоступным для выбора, т.е. запретить выделение текста.
label {
-webkit-user-select: none;
user-select: none;
}Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения — выглядеть немного странно и дико.
Проверить можно в следующей демонстрации. Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа — нет.
xhtml.ru.Этот метод также работает с виджетами раскрытия содержимого (HTML-элемент details) или фальшивыми кнопками — например, <div> с обработчиком кликов на нём. Правда, использование настоящего элемента <button> предпочтительнее не только с точки зрения семантики и доступности, но и потому, что текст в такой кнопке по умолчанию не может быть выделен, а это позволяет избежать проблемы с самого начала.
Выборочное выделение текста
Невыделяемый текст можно смешивать с выделяемым текстом. Невыделяемые части просто пропускаются при выборе текста и будут пропущены при копировании/вставке выделения.
В примере ниже используется user-select: none на числовых маркерах сносок. Поэтому, когда выделенное копируется/вставляется, маркеры автоматически удаляются.
See this code Declaring Bits of Unselectable Text on x.xhtml.ru.
Но это работает не во всех браузерах.
Safari (iOS и компьютер) и Android Chrome по-прежнему будут копировать маркеры.
Стилизация выделения
Стилизовать выделенный текст можно с помощью псевдоэлемента color, background-color и text-shadow (в спецификации их больше, но всё портит поддержка свойств браузерами).
Вот пример стилизации выделенного текста в HTML-элементе <p>.
p::selection {
color: #fffb07;
background-color: #ff063b;
text-shadow: 2px 2px #028e4a;
}Чтобы увидеть результат, выделяйте текст в примере ниже.
See this code Styling Text Selections on x.xhtml.ru.
Немного особенностей
Есть еще одна декларация user-select: contain, которая должна ограничивать выделение текста внутри элемента, как это работает с <textarea>. Однако, IE11 был последним браузером, который поддерживал это.
В настоящее время значение contain не поддерживают все современные браузеры.
Тем не менее, все редактируемые элементы (такие как <textarea>) обрабатываются, как если бы они имели user-select: contain. Псевдоэлементы ::before и ::after нельзя выбрать, как если бы у них было установлено user-select: none. Изменить такое поведение не получится.
Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.
Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.
Using CSS to Control Text Selection.
Bootstrap и выделенный текст — HTML и CSS — Форумы SitePoint
toplisek
#1
Я протестировал Bootstrap и выделил текст. Кажется, он использует
элемент. Есть ли возможность сделать четкие стили исправления и остановки, так как любой специально выделенный текст будет поврежден из-за этого.
керри14
#2
топлисек
#3
Boostrap V3 (верхняя версия не тестировалась…) использует метку
{
цвет: #000;
фон: #ff0;
}
Если вы используете такой код:
Зарегистрируйтесь сейчас!
Если вы разместите пользовательский код, все элементы будут повреждены.
топлисек
#4
Я решил использовать уникальный элемент для этого элемента, называемый меткой. Таким образом, нет необходимости устранять исходный стиль Bootstrap, поскольку он должен оставаться таким, какой он есть. Другая проблема также связана с Z-индексом из-за выделенного текста.
Когда я размещаю код без Bootstrap, он удаляет выделенный текст. Является ли это проблемой Bootstrap, поскольку Z-index -1 не будет работать? Я имею в виду, разрешено ли -1 внутри Bootstrap?
ПолОБ
#5
топлисек:
Таким образом, нет необходимости устранять исходный стиль Bootstrap, поскольку он должен оставаться таким, какой он есть.
Знак 9Элемент 0062 очень похож на другие html-элементы тем, что он имеет некоторые стили пользовательского агента (UA) по умолчанию, чтобы придать ему цвет и фон.
В Chrome вы получаете желтый фон и черный текст по умолчанию. Файл Normalize .css (обычно входящий в состав начальной загрузки) применяет те же стили, поэтому значения по умолчанию не изменяются. Bootstrap 3 только меняет цвет фона на #fcf8e3 и добавляет отступы .2em.
Если вы хотите использовать свой класс .highlight, вам нужно только указать эти 3 значения плюс все, что вы хотите.
напр.
mark.highlight {background:красный;цвет:синий;padding:0.5em;}
Нет необходимости использовать неправильный элемент для задания и нет необходимости изменять настройки начальной загрузки по умолчанию.
топлисек:
Когда я размещаю код без Bootstrap, он удаляет выделенный текст. Является ли это проблемой Bootstrap, поскольку Z-index -1 не будет работать? Я имею в виду, разрешено ли -1 внутри Bootstrap?
Я понятия не имею, что это значит, так как z-index не имеет ничего общего с этим, если только вы не размещаете элемент поверх другого элемента.
z-index:-1 является абсолютно допустимым и перемещает элемент ниже других элементов с более высоким z-index в том же контексте стека. Если родитель не позиционирован или имеет автоматический z-индекс, вы можете обнаружить, что фон идет ниже фона родителя. Позиционированный родитель с z-индексом, отличным от auto, является атомарным, и никакие позиционированные элементы не могут выйти из этого контекста и не будут отображаться под фоном родителя.
Это довольно простой CSS для z-index, поэтому его стоит изучить, если вы все еще не знаете, как все это работает вместе
2 лайка
топлисек
#7
Спасибо за сообщение. Я буду тестировать дальше, так как не понимаю, как это возможно, Z-index: 1 работает, но Z-index: -1 устранит эффект подсветки.
Возможно, в тексте используется цвет фона, и он будет приоритетным.
ПолОБ
#8
топлисек:
Я не понимаю, как это возможно, Z-index: 1 работает, но Z-index: -1 устраняет эффект подсветки.
Я думал, что уже объяснил механизм
z-index-1 (вместе со значением позиции, отличным от auto) переместит элемент ниже фона его не позиционированного родителя.
топлисек
#9
Спасибо за сообщение.
Я решил внутри Bootstrap. Когда я добавлю Z-индекс как 0 для моего элемента span, он будет работать.
Псевдоэлемент будет иметь Z-индекс: -1.
ПолОБ
#10
топлисек:
Когда я добавляю Z-индекс как 0 для моего элемента span, он будет работать
Да, это то, о чем я всегда говорил.
ПолOB:
Если родитель не позиционирован или имеет автоматический z-индекс, вы можете обнаружить, что фон идет ниже фона родителя.
После того, как вы примените значение к позиционированному родителю, любые дочерние z-индексы не могут быть ниже родительского, даже если они имеют z-index: -100000. Сам родитель может быть любым номером z-index, который соответствует текущему контексту стека, и дочерние элементы не будут опускаться ниже фона родителя.
Однако, если позиционированный родитель имеет значение z-index:auto (по умолчанию), то позиционированный дочерний элемент с z-индексом меньше нуля будет находиться ниже фона родителей.
Это основы CSS и z-index и не имеют никакого отношения к начальной загрузке
топлисек
#11
Теперь работает.
система закрыто
#12
Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.
Стиль выделения и выделения текста — Видеоурок по CSS
Из курса: Советы по CSS
Выбор стиля текста и выделение
“
- [Инструктор] Стили пользовательского агента браузера имеют предопределенные стили для всех стандартных взаимодействий.
И это включает выделение выделения. Используйте курсор, чтобы выделить любой текст, и обычно он отображается на синем фоне, а иногда цвет текста также меняется. Для некоторых дизайнов может быть предпочтительнее изменить цвет или внешний вид выделения, чтобы сделать его более заметным, или чтобы он соответствовал общему языку дизайна страницы или сайта, или просто потому, что он выглядит круто. Для всех этих сценариев у нас есть псевдоэлемент selection. Позвольте мне показать вам, как это работает. Я могу применить это глобально ко всей странице или только к определенному элементу. Так что в данном случае я применю его только к этому абзацу, который у меня есть здесь. Итак, я бы сказал, демо-зона, это вся синяя зона. И затем я скажу, что для выделения абзацев это будет псевдоэлемент, а затем внутри здесь я теперь могу определить, например, другой цвет фона. Итак, я скажу цвет фона и установлю его, давайте посмотрим какое-нибудь значение HSL. Так что давайте посмотрим, 51, это желтый, а затем 96% и 51%.
Это даст нам более глубокий, более яркий желтый цвет и сохранит это. Так что теперь, когда я выбираю текст здесь вверху, он все тот же синий, но если я выбираю текст здесь внизу, он теперь желтый. И здесь я мог бы пойти дальше. Я могу применить дополнительные стили, если захочу, контуры и выделение шрифта, и все, что захочу. Это такой же стиль, как и любой другой, за исключением того, что мы подключаемся к определенному поведению браузера. Здесь одно важное замечание. Поскольку выделение является псевдоэлементом, его необходимо либо применить глобально, просто объявив правило ::selection для всего документа, либо для отдельных элементов или контейнеров. Если вы примените его к элементу-контейнеру, он не будет работать. Так что, если бы я сказал что-то вроде демонстрационной области, а затем выбора, вот так, то это не сработает, потому что мы на самом деле не нацелены на этот элемент. Таким образом, вы должны пройти весь путь вниз и нацелиться на конкретные элементы, которые вы собираетесь выделить.
Как в данном случае, абзац. Если вы хотите, чтобы он был глобальным, вы просто объявляете ::selection и ничего больше. А теперь увидишь, здесь тоже будет желто. Поэтому убедитесь, что вы ориентируетесь на правильные элементы. О, и если вам интересно, если вы когда-нибудь захотите автоматически выделить какой-либо контент в своем тексте, вы можете сделать это, манипулируя своим HTML. Итак, если вы войдете в свой текст здесь и просто найдете что-то, что хотите выделить, давайте посмотрим, как здесь, внутри моего абзаца, я просто настрою элемент метки и оберну любой текст, который я хочу автоматически выделить, в этот элемент метки, как это. И когда я его сохраню, вы увидите, что он автоматически выбирает цвет выделения, который я выбрал. И этот пункт будет автоматически выделен. Это то, что вы видите, когда заходите на такой сайт, как Википедия, и выполняете поиск по определенному термину, он будет отображаться в ваших результатах поиска, потому что пометка была введена с помощью JavaScript.