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



Выделение текста на странице нам необходимо для копирования какого-либо материала. Это мы делаем с вами с помощью мышки. Стандартный цвет выделения зависит от выбора браузера, так как различные браузеры выделяют текст разным цветом. Но если вы пожелаете, то можете установить на сайте свой цвет выделения.

Код «::selection» используется для данной фишки.


::selection { background: #3499FE; /* webkit, opera, safari, IE9 */ } ::-moz-selection { background: #3499FE; /* mozilla firefox */ }

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


p.yellow::selection { background: #FFCC66; } p.yellow::-moz-selection { background: #FFCC66; } p.blue::selection { background: #3499FE; } p.blue::-moz-selection { background: #3499FE; } p.green::selection { background: #67B23A; } p.green::-moz-selection { background: #67B23A; }

На странице HTML записываем:

<p class=" yellow"> Выделяем текст - цвет фона будет желтым. </p> <p class="blue"> Выделяем текст - цвет фона будет голубым. </p> <p class="green"> Выделяем текст - цвет фона будет зеленым. </p>

Ниже, выделяя абзацы текст, вы увидите результат:


Выделяем текст - цвет фона будет желтым.

Выделяем текст - цвет фона будет голубым.

Выделяем текст - цвет фона будет зеленым.

Источник на сайте: www.css-tricks.com

09.09.2013