::selection

Ограниченная доступность

Эта функция не является базовой, так как она не работает во всех широко используемых браузерах.

CSS псевдоэлемент ::selection применяет стили к части документа, выделенной пользователем (например, при нажатии и перетаскивании мыши по тексту).

Попробовать

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

С ::selection можно использовать только определённые свойства CSS:

color
background-color
text-decoration и связанные с ним свойства
text-shadow
-webkit-text-stroke-color, -webkit-text-fill-color и -webkit-text-stroke-width

В частности, background-image игнорируется.

Синтаксис

::selection {
  /* ... */
}

Удобство использования

Не переопределяйте стили выделенного текста только по эстетическим соображениям — пользователи могут настроить их в соответствии со своими потребностями. Для людей с когнитивными проблемами или менее технически подкованных пользователей неожиданные изменения в стилях выделения могут затруднить понимание функциональности.

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

Коэффициент контрастности цвета определяется путем сравнения яркости выделенного текста и фона выделенного текста. Для соответствия текущим Руководящим принципам доступности веб-контента (WCAG), текст должен иметь коэффициент контрастности 4,5:1, или 3:1 для крупного текста, такого как заголовки. (WCAG определяет крупный текст как имеющий размер от 18.66px до 24px и жирный шрифт, или 24px или больше).

Примеры

HTML

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

CSS

/* 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;
}

Результат

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

Спецификация
CSS Модуль псевдоэлементов уровня 4 # selectordef-selection

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`::selection`	1	12	621	9.5	1.1	18	624	14	Нет	1.0	37
`text-decoration`	105	105	Нет	91	Нет	105	Нет	72	Нет	20.0	105

См. также

pointer-events - управление событиями, активными на элементе

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection