Своё оформление для выделения текста на сайте

Как на сайте изменить выделение текста и вместо стандартных браузерных стилей назначить свои.

Если вы не знали что для выделения текста на сайте можно добавлять свои стили, то они есть. Я кстати тоже с этим столкнулся впервые только недавно.

Для оформления выделения текста есть специальный псевдоэлемент CSS с названием selection.

Псевдоэлемент selection

::selection - это псевдоэлемент в CSS.

Он позволяет задать для назначенного текста свой стиль оформления, который будет при выделении текста.

Для псевдокласса selection доступны следующие CSS свойства:

• color - цвет текста;
• background - цвет фона выделяемого текста;
• backgroud-color - цвет фона выделяемого текста;
• text-shadow - тень текста

Псевдоэлемент selection понимают все браузеры кроме iOS Safari. Детальную статистику о поддержке браузерами css-свойства selection смотрите тут.

Для браузера Firefox до 62 версии (дата выхода 62 версии - конец 2018г) этот псевдоэлемент указывается с префиксом -moz-, а значит пишется как -moz-selection

В CSS этот псевдоэлемент добавляется через два двоеточия:

::selection

Демо - попробуйте выделить мышкой текст в блоке ниже:

В примере использована следующая конструкция (сам текст я укоротил):

<div class="test-selection">
    <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут...</p>
</div>

CSS код:

.test-selection p::selection {
    background-color: #000;
    color: #ff6000;
}
.test-selection p::-moz-selection {
    background-color: #000;
    color: #ff6000;
}

Я пробовал прописать классы через запятую чтобы два раза не писать одни и те же свойства - не заработало. Пришлось для Firefox повторно прописывать значения css-свойств для selection.