W3docs
ru
Войти

CSS псевдоэлемент ::selection

Используйте псевдоэлемент CSS ::selection для выделения и стилизации части документа. Узнайте о псевдоэлементе и изучите примеры.

Псевдоэлемент ::selection нацелен на часть документа, которую пользователь выделил — например, кликом и перетаскиванием мыши по тексту или нажатием Ctrl/Cmd + A. Он позволяет переопределить стандартный вид выделения браузера, чтобы выделенный текст соответствовал вашему бренду или улучшал контрастность.

По умолчанию браузер отображает выделенный текст с цветом подсветки операционной системы (обычно синий фон с белым текстом). Стилизация ::selection заменяет это поведение по умолчанию для целевых элементов.

В этой главе рассматривается синтаксис, допустимые свойства, особенности вендорных префиксов и практические примеры для текста, нескольких цветов и полей форм.

Зачем и когда использовать

Пользовательский стиль выделения — это небольшая деталь, которая придаёт сайту отполированный вид:

  • Фирменный стиль — согласуйте подсветку с вашим акцентным цветом вместо синего цвета ОС.
  • Читаемость — на тёмном или низкоконтрастном фоне стандартная подсветка может затруднить чтение текста; вы можете выбрать сочетание с гарантированным контрастом.
  • Области применения — применяйте разные цвета выделения для разных разделов (например, блоки кода против основного текста).

Следите за читаемостью выделенного текста: всегда задавайте color и background-color вместе, чтобы не получить, например, белый текст на почти белой подсветке.

Допустимые свойства

::selection игнорирует большинство CSS. Только небольшой фиксированный набор свойств CSS можно использовать для его стилизации:

Такие свойства, как font-size, font-family, margin или transform, не влияют на выделенный текст — выделение является лишь графической подсветкой, а не реальным блоком, который можно перемещать или изменять.

Информация

В Firefox исторически использовалась форма с вендорным префиксом: ::-moz-selection. Для поддержки старых версий Firefox объявляйте правило с префиксом перед стандартным правилом ::selection, как это сделано в примерах ниже.

Этот псевдоэлемент был введён в CSS Selectors Level 3, затем удалён и теперь входит в спецификацию CSS Pseudo-Elements Level 4.

Стандарт и версия

CSS Pseudo-Elements Level 4

Синтаксис

CSS псевдоэлемент ::selection

::selection {
  css declarations;
}

Пример псевдоэлемента ::selection:

Пример кода CSS ::selection

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ::-moz-selection {
        color: #eee;
        background: #8ebf42;
      }
      ::selection {
        color: #eee;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>
Попробуйте сами »

Пример псевдоэлемента ::selection с разными цветами:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .green::-moz-selection {
        background-color: #8ebf42;
      }
      .green::selection {
        background-color: #8ebf42;
      }
      .yellow::-moz-selection {
        background-color: #FFFF19;
      }
      .yellow::selection {
        background-color: #FFFF19;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>This is a text with the default selection background-color.</p>
    <p class="green">Select this text to see a green background.</p>
    <p class="yellow">Select this text to see a yellow background.</p>
  </body>
</html>
Попробуйте сами »

Пример псевдоэлемента ::selection с тегами <textarea> и <input>:

CSS ::selection, ещё один пример кода

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input::-moz-selection {
        color: #1c87c9;
        background-color: #eee;
      }
      input::selection {
        color: #1c87c9;
        background-color: #eee;
      }
      textarea::-moz-selection {
        color: white;
        background-color: #8ebf42;
      }
      textarea::selection {
        color: white;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>Input element</p>
    <form>
      <input type="text" value="Select this input text" />
      <p>Textarea element</p>
      <textarea rows="5" cols="25">Select this textarea text</textarea>
    </form>
  </body>
</html>
Попробуйте сами »

Важные моменты

  • Наследование не работает как у обычных свойств. Правило ::selection применяется к тому элементу, на который оно нацелено; это не значение, которое каскадируется на выделенные дочерние элементы, как это делает color. Чтобы стилизовать выделение по всему сайту, пишите правило на широком селекторе, например ::selection (соответствует всему) или body ::selection.
  • Фон должен быть достаточно непрозрачным, чтобы быть видимым. background-color с очень низким значением альфа-канала может быть трудно заметить на существующем фоне.
  • Ограничено списком допустимых свойств. Если объявление, кажется, не имеет эффекта, проверьте допустимый список выше — вероятно, оно игнорируется.

Чтобы глубже изучить отдельные свойства, которые можно использовать здесь, смотрите color, background-color и text-shadow.

Практика

Практика
Чего можно достичь с помощью псевдоэлемента ::selection в CSS?
Чего можно достичь с помощью псевдоэлемента ::selection в CSS?
Was this page helpful?