Как изменить цвет выделения текста на сайте только с помощью CSS
Сегодня я Вам расскажу как изменить цвет выделения текста на сайте только с помощью CSS.

Делается это очень просто, нужно только прописать несколько не сложных строк в стилях CSS. Здесь мы рассмотрим как сделать один цвет выделения для всего текста на сайте, а так же сделаем отдельные цвета для того текста который мы захотим, другими словами для каждого текста отдельный цвет.

Цвет выделения для всего текста на сайте


Код
::selection {background: #00b4f0;color:#fff;}
::-moz-selection {background: #00b4f0;color:#fff;}
::-webkit-selection {background: #00b4f0; color:#fff;}

Цвет выделения для отдельного текста на сайте


Код
p.red::selection {background: #FFB7B7;}
p.red::-moz-selection {background: #FFB7B7;}
p.red::-webkit-selection {background: #FFB7B7;}
   
p.blue::selection {background: #67cfff;}
p.blue::-moz-selection {background: #67cfff;}
p.blue::-webkit-selection {background: #67cfff;}
   
p.green::selection {background: #78e780;}
p.green::-moz-selection {background: #78e780;}
p.green::-webkit-selection {background: #78e780;}

Как видите, что для каждого цвета мы задали свой класс. Теперь давайте посмотрим как это будет выглядеть в HTML:


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

Всего комментариев: (0)

_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Красивая форма входа для uCoz от Kanavas
Красивая форма входа для uCoz от Ka
Почему Instagram изменил логотип?
Почему Instagram изменил логотип?
Face Your Manga – сервис для создания аватарок
Face Your Manga – сервис для создан
Как отыскать своё жизненное предназначение
Как отыскать своё жизненное предназ
CSS3 выдвижной нижний блок (footer)
CSS3 выдвижной нижний блок (footer)
Отличные анимированные иконки для предзагрузки сайта
Отличные анимированные иконки для п