Как изменить цвет выделения текста на сайте только с помощью 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$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

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

Классическая форма входа для сайтов с uID авторизацией
Классическая форма входа для сайтов
Игра Kolor
Игра Kolor
LinguaLeo – онлайн сервис для изучения английского языка
LinguaLeo – онлайн сервис для изуче
80 социальных иконок — Picons
80 социальных иконок — Picons
Desygner — бесплатный сервис для создания обложек, макетов, постеров и визиток
Desygner — бесплатный сервис для со
МОДАЛЬНЫЕ AJAX ОКНА
МОДАЛЬНЫЕ AJAX ОКНА