Изменение цвета выделения текста с помощью CSS

Если вам вдруг приспичило изменить цвет выделения текста на страницах вашего сайта, то вы можете сделать это с помощью CSS3. Правда, на сегодняшний день эту функцию поддерживают только два браузера: Safari и Firefox, причем отображают совершенно по разному.

И так начнем:

::selection {
background: #ff0000; /* Safari */
}

::-moz-selection {
background: #ff0000; /* Firefox */
}

Теперь цветом выделения текста будет красным цвет. Однако, это еще не все. Можно буквально каждому абзацу задавать цвет выделения текста. Надо лишь указать в CSS:

p.red::selection {
background: #FFDFDF;
}
p.red::-moz-selection {
background: #FFDFDF;
}
p.blue::selection {
background: #BFCFFF;
}
p.blue::-moz-selection {
background: #BFCFFF;
}
p.green::selection {
background: #C9EDDB;
}
p.green::-moz-selection {
background: #C9EDDB;
}

А в HTML запишем:

<p class="red">
В этом абзаце при выделении текста цвет фона будет розовым.
</p>
<p class="blue">
В этом абзаце при выделении текста цвет фона будет голубым.
</p>
<p class="green">
В этом абзаце при выделении текста цвет фона будет светлозеленым.
</p>

И получим вот такой результат:

В этом абзаце при выделении текста цвет фона будет розовым.

В этом абзаце при выделении текста цвет фона будет голубым.

В этом абзаце при выделении текста цвет фона будет светлозеленым.