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

::selection

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

Псевдо-элементы

Синтаксис

1
2
3
::selection {
  background-color: cyan;
}

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

Примечание

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

Примеры

Пример 1

1
2
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* 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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!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, как покаано в примере.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Выделение</title>
    <style>
      ::selection {
        background: #809778; /* Цвет фона */
        color: #fff; /* Цвет текста */
      }
    </style>
  </head>
  <body>
    <p>
      В условиях электромагнитных помех, неизбежных при
      полевых измерениях, не всегда можно опредлить, когда
      именно волна ненаблюдаемо стабилизирует кварк
    </p>
  </body>
</html>

Результат

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

См. также

Ссылки

  • Псевдо-элемент ::selection MDN (рус.)

Комментарии