Как отключить подсветку выделяемого текста в CSS/HTML?

В случаях, когда нужно отключить выделение текста в браузерах, можно воспользоваться специальными CSS-свойствами. Для начала посмотрим на стандартное поведение (для теста я создал test.html с определенным контентом):

<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>

  <body>
    <h1>Привет <%= @user.name %>!</h1>
  </body>

</html>

Если открыть файл в браузере и попробовать выделить текст, мы получим стандартное поведение:

Стандартное поведение выделения текста в браузере


Чтобы отключить выделение и подсветку выделяемого текста воспользуемся следующим CSS-сниппетом, который включает в себя свойства подходящие для реализации данного функционала для большинства браузеров:

-webkit-touch-callout: none; /* Мобильный iOS Safari */
-webkit-user-select: none; /* Desktop Safari */
-khtml-user-select: none; /* Konqueror HTML (KDE Browser) */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer and Edge */
user-select: none; /* Chrome, Opera and Firefox */

Чтобы применить все эти свойства к определенному элементу, обернем их в класс, а класс добавим в нужное место:

<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>

  <body>
    <h1 class="no-select">Привет <%= @user.name %>!</h1>
    <style media="screen">
    .no-select {
      -webkit-touch-callout: none; /* Мобильный iOS Safari */
        -webkit-user-select: none; /* Desktop Safari */
         -khtml-user-select: none; /* Konqueror HTML (KDE Browser) */
           -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer and Edge */
                user-select: none; /* Chrome, Opera and Firefox */
      }
    </style>
  </body>

</html>

Теперь текст (заголовок h1) не будет выделяться и подсвечиваться в большинстве современных браузеров. Стоит отметить, что это не только визуальное изменение, но и функциональное - текст не будет выделяться.

Для проверки можно добавить другой элемент с текстом и воспользоваться CTRL + A для выделения текста всей страницы и попробуем скопировать контент в буфера обмена при помощи CTRL + C.


CopyPaste контента


При последующей вставке контента (CTRL + V) из буфера обмена, мы увидим, что в буфер попал текст без класса ".no-select".
Наверх