CSS изменить цвет выделения текста


Изменить цвет выделения текста при помощи HTML / CSS. Ниже размещено несколько способов для изменения цвета выделения всего текста на сайте/страницы и только для отдельного текста по классу и индификатору (id).
Изменить цвет выделения для всего текста на сайте:
<style>
::selection {color:#fff; background:#2BAECA;}
::-moz-selection {color:#fff; background:#2BAECA;}
::-webkit-selection {color:#fff; background:#2BAECA;}
</style>
color:#fff; - это цвет текста при выделении.
background:#2BAECA; - это цвет фона текста при выделении.
Для демонстрации выделите любой текст на данной веб-странице сайта.

Изменить цвет выделения для отдельного текста


Данным способом можно изменить цвет выделения для отдельного текста на странице, при помощи класса (class) в теге div текста. Чуть ниже размещён ещё один вариант с использованием индификатора (id) текста.
CSS стили для сайта или отдельной страницы:
<style>
div.red ::selection {color:#fff; background:#F25222;}
div.red ::-moz-selection {color:#fff; background:#F25222;}
div.red ::-webkit-selection {color:#fff; background:#F25222;}
</style>
HTML-исходник текста:
<div id="wb_demo1"class="red">
<span>
Ваш текст</span>
</div>
Демо-пример (демонстрация по классу):
Выделите этот текст для демонстрации цвета выделения используя class.
Изменить цвет выделения по индификатору (id)
CSS стили для сайта или отдельной страницы:
<style>
#wb_demo2 ::selection {color:#fff; background:#EAC030;}
#wb_demo2 ::-moz-selection {color:#fff; background:#EAC030;}
#wb_demo2 ::-webkit-selection {color:#fff; background:#EAC030;}
</style>
wb_demo2 - это индификатор (id) блока div с текстом.
Демо-пример (демонстрация по id):
Выделите этот текст для демонстрации цвета выделения текста по id.