Перейти к содержанию

::selection

Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства:

Синтаксис

::selection {
  background-color: cyan;
}

Спецификация

Примечание

Firefox до версии 62 использует нестандартный псевдоэлемент ::-moz-selection.

Примеры

Пример 1

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

Пример 2

В данном примере при выделении текста он изменяет свой цвет и фон.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>selection</title>
    <style>
      p::selection {
        color: #ff0; /* Цвет текста */
        background: #000; /* Цвет фона */
      }
    </style>
  </head>
  <body>
    <p>При выделении этого текста он изменит свой цвет.</p>
  </body>
</html>

Пример 3

Как задать цвет выделения текста?

Чтобы указать цвет и фон выделенного текста применяется псевдоэлемент ::selection, в котором задаются свойства color и background, как покаано в примере.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Выделение</title>
    <style>
      ::selection {
        background: #809778; /* Цвет фона */
        color: #fff; /* Цвет текста */
      }
    </style>
  </head>
  <body>
    <p>
      В условиях электромагнитных помех, неизбежных при полевых измерениях, не
      всегда можно опредлить, когда именно волна ненаблюдаемо стабилизирует
      кварк
    </p>
  </body>
</html>

Результат

Цвет и фон выделенного текста

См. также

Ссылки