::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 |
Совместимость с браузерами
Loading…