Как изменить цвет выделения текста на сайте только с помощью 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
Возвращаем старую форму входа на uC
Материал просмотрен как на YouTube by webo4ka.ru
Материал просмотрен как на YouTube
Prime-Music.net
Prime-Music.net
25+ подборок бесплатных иконок на коммерческую тематику
25+ подборок бесплатных иконок на к
Прекрасные и качественные иконки для сайта
Прекрасные и качественные иконки дл
Несколько отличных эффектов при наведении на текст
Несколько отличных эффектов при нав