Изменение цвета шрифта и фона при выделении текста на странице

Одним из интересных псевдоселекторов в CSS3 является ::selection. Он позволяет изменить стандартный системный цвет фона при выделении текста на странице веб-сайта. Также, можно изменить и цвет шрифта при выделении. Поддерживается большинством браузеров, но IE версии 9 и выше.

Рассмотрим применение этого псевдоселектора на примере:

• Цвет фона при выделении текста меняется на красный
• Цвет фона при выделении текста меняется на синий
• Цвет шрифта меняется на черный, а цвет фона меняется на желтый

Задаем класс “red” для параграфа

<p class="red">Текст</p>

Описываем класс “red” для параграфа и псевдоселектора:

p.red::selection {
 background: #ffb7b7;
}

Полный CSS код

Мы меняем цвет фона для красного и синего параграфов, а также допольнительно цвет шрифта для желтого. Добавляем -moz и -webkit для поддрежки другими браузерами:

p.red::selection {
 background: #ffb7b7;
}
p.red::-moz-selection {
 background: #ffb7b7;
}
p.red::-webkit-selection {
 background: #ffb7b7;
}
p.blue::selection {
 background: #a8d1ff;
}
p.blue::-moz-selection {
 background: #a8d1ff;
}
p.blue::-webkit-selection {
 background: #a8d1ff;
}
p.yellow::selection {
 background: #f2d119;
        color:#000;
}
p.yellow::-moz-selection {
 background: #f2d119;
        color:#000;
}
p.yellow::-webkit-selection {
 background: #f2d119;
       color:#000;
}

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

Высоких конверсий!