::selection
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).
::selection { background: cyan; } Разрешённые свойства
Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::selection :
colorbackground-colorcursorcaret-coloroutlineи его длинные записиtext-decorationи связанные свойстваtext-emphasis-colortext-shadow
Предупреждение: Заметим, что, в частности, свойство background-image игнорируется.
Синтаксис
/* синтаксис Firefox */ ::-moz-selection { } Пример
HTML
<div>Этот текст будет стилизован особым образом при выделении.</div> <p>Также попробуйте выделить текст в этом параграфе.</p> CSS
/* Сделаем выделенный текст золотым с красным фоном */ ::-moz-selection { color: gold; background: red; } ::selection { color: gold; background: red; } /* Сделаем выделенный в параграфе текст белым на синем фоне */ p::-moz-selection { color: white; background: blue; } p::selection { color: white; background: blue; } Результат
Спецификации
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |