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

20-07-2017, 14:44

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

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

Если вам надоел стандартный цвет выделения текста, который практически одинаковый на всех сайтах, его легко изменить на любой другой цвет при помощи CSS. Сделайте свой сайт уникальным от "А" до "Я".. Цвет выделения текста на сайте меняется очень легко, добавив всего одну строчку в файл с вашими стилями. Для работы в разных браузерах нужно добавить несколько строчек. И так, приступим...

Вариант №1:
Для того, чтобы глобально сменить цвет выделения текста на всем сайте, нужно прописать в style.css следующие строки:
::selection {background: #ffb7b7;}
::-moz-selection {background: #ffb7b7;}
::-webkit-selection {background: #ffb7b7;}

В нашем случае мы сменили цвет выделения текста на светло-красный, как у нас на сайте DataLife.su. Вы можете сменить цвет выделения на любой по вашему вкусу, воспользовавшись для удобства любой онлайн таблицей HTML кодов цветов, которых в сети полно, например этой.

Вариант №2:
Допустим Вы захотели не просто изменить цвет выделения текста на сайте, а изменить и сам цвет текста, тогда прописываем в ваш файл со стилями style.css следующие строки:
::selection {background: #33cc66; color:#fff;}
::-moz-selection {background: #33cc66; color:#fff;}
::-webkit-selection {background: #33cc66; color:#fff;}

В таком случае цвет выделения текста будет светло-зеленым, а сам текст будет белого цвета. Не забывайте о контрасте при выборе цветов. Цвет фона и текста должны отличаться друг от друга для нормальной читабельности текста при выделении.

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

p.content::selection {background: #cc0000;}
p.content::-moz-selection {background: #cc0000;}
p.content::-webkit-selection {background: #cc0000;}
 
p.info::selection {background: #0000ff;}
p.info::-moz-selection {background: #0000ff;}
p.info::-webkit-selection {background: #0000ff;}
 
p.fullstory::selection {background: #339933;}
p.fullstory::-moz-selection {background: #339933;}
p.fullstory::-webkit-selection {background: #339933;}


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

<p class="content">Текст для выделения зеленым цветом</p>
<p class="info">Текст для выделения красным цветом</p>
<p class="fullstory">Текст для выделения синим цветом</p>


Вот и все. Если есть вопросы, рад ответить вам в комментариях.
 Написал DataLife Пользователь offline (6 ноября 2014 22:30)   Пожаловаться  
На счет варианта №3 у каждого из вас будут свои стили и вместо content, info и fullstory должны быть прописаны ваши стили. Все, кто дружит с css сразу поймут. Кто не понимает, как задать цвет выделения текста для определенного класса в css, задавайте вопросы, постараемся ответить.