Как запретить выделение текста на сайте через CSS

Выделение текста в меню, кнопках и других элементах управления лучше запретить т.к. при нескольких кликах он выделяется и визуально мешает.

Отключить его можно свойством user-select, также его нужно продублировать вендорными префиксами т.к. например, IE и Edge поддерживают только -ms-user-select.

* {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
CSS
1
<p>Обычный текст</p>
<p class="noselect">Этот текст нельзя выделить</p>
HTML
.noselect {
	color: #555;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
CSS

Результат:

2
none Запрещено выделять элемент
auto

Значение auto определяется следующим образом:

  • У :before и :after – none
  • Если элемент является редактируемым элементом – contain
  • Если указан у родителя, то наследуется
  • По умолчанию – text
text Разрешено выделить текст в элементе
all Позволяет выделить текст внутри элемента, включая дочерние
contain Позволяет выделять текст только внутри элемента
3

04.10.2019, обновлено 12.11.2021
26360

Комментарии

, чтобы добавить комментарий.

Другие публикации

Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
22452
+5
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
26865
+4
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
53553
+3
Курсоры в CSS
За вид курсора отвечает CSS свойство «cursor». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.
44469
+9
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
245156
+13
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43772
+34