Многие задавались вопросом, как можно поменять оттенок цвета при выделение текста, это когда на каком то сайте что то копируешь, где видишь, что выделение текста идет совершенно другим оттенком. Теперь вы сами у себя на сайте сможете сделать, а точнее задать некоторым описанием.
Такой эффект трюка можно очень быстро добиться веб мастеру, где нужно задействовать отвечающий псевдоэлемент ::selection который отвечает за функционал.
HTML
Код
<h2>Зелёный цвет</h2>
<p class="green">Пример зелёного цвета при выделении текста</p>
<h2>Красный цвет</h2>
<p class="red">Пример красного цвета при выделении текста</p>
<h2>Голубой цвет</h2>
<p class="blue">Пример голубого цвета при выделении текста</p>
CSS
Код
::selection {background: #b1a8a8;}
::-moz-selection {background: #b1a8a8;}
p.red::selection {background: #f7a7a7;}
p.red::-moz-selection {background: #f7a7a7;}
p.blue::selection {background: #51bef1; margin-bottom:30px;}
p.blue::-moz-selection {background: #51bef1;}
p.green::selection {background: #65dc6d;}
p.green::-moz-selection {background: #65dc6d}
Где уже самостоятельно можно выставить тот оттенок цвета, что соответствует дизайн сайта.
Демонстрация
