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

Разместил / Просмотров: 12 523 / комментариев 18

Здравствуйте, дорогие читатели блога beloweb.ru. Сегодня я хочу рассказать Вам как изменить цвет выделения текста на сайте только с помощью CSS.

Естественно это не очень Важный момент в дизайне Вашего сайта. Но если Вы измените цвет выделения это ещё больше подчеркнёт уникальность Вашего дизайна. Тем более если стандартный синий цвет выделения текста ну никак не хочет сочетаться с другими цветами Вашего шаблона.

За урок огромное спасибо сайту css-tricks.com.

В общем, друзья, давайте начинать.

Пример

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

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

По умолчанию давайте выберем серый цвет #ccc. И для того чтобы цвет выделения изменился, нужно добавить вот эти строки в стили:

::selection {background: #ccc;}
::-moz-selection {background: #ccc;}
::-webkit-selection {background: #ccc; color:#fff;}

Всё. Теперь на нашем сайте цвет выделения стал серым. Но и это ещё не всё.

Цвет текста

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

::selection {background: #ccc; color:#fff;}
::-moz-selection {background: #ccc; color:#fff;}
::-webkit-selection {background: #ccc; color:#fff;}

Вот теперь при выделении цвет буквы будет белого цвета.

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

Например нам хочется, чтобы сверху текст выделялся зелёным, посередине красным, а снизу голубым. Для этого просто нужно к тегу <p> присвоить соответствующий класс, например для красного выделения класс будет red и так далее.

Таким образом вот как будет выглядеть код CSS:

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>

Пример

Как видите, здесь нет ничего сложного. Просто к каждому тегу <p> мы присвоили класс с соответствующим цветом.

Вот и всё, дорогие друзья. Теперь мы научились изменять цвет при выделении текста. Если у Вас возникнут какие либо вопросы обращайтесь в комментариях. До скорых встреч.

  • Ринат

    Ого а я не знал как это делается теперь попробую на своем применить. Спасибо Саня!

  • Ринат, рад, что помог :-)

  • А я вообще нигде такого не видел и не знал про таку фишку. Спасибо. Возможно, у себя на сайте применю.

  • Юрий, применяйте, отлично смотрится :-)

  • Александр, сейчас начал делать редизайн сайта, и решил использовать опыт, полученный с этого урока. Вот только в Хроме эффект не работает. Но не волнуйтесь! Я нашел решение))) К коду
    ::selection {background: #ccc; color:#fff;}
    ::-moz-selection {background: #ccc; color:#fff;}
    нужно еще добавить
    ::-webkit-selection {background: #ccc; color:#fff;}
    Так что советую добавить эту строку к коду урока. А то ведь это я догадался, так как уже кое-какой опыт имеется. А новички то не сообразят)

  • Юрий огромное спасибо, уже исправил :-) Извиняюсь не досмотрел :-) Но правда у меня в хроме всё работает. Какая версия Хрома у Вас стоит?

  • Да за что извиняться — я же не жаловался)) Так, предупредил. Профессиональная этика должна же быть)) Нужно же помогать друг другу.
    Версия 18.0.1025.1634
    Странно как-то. Как это без webkit может в Хроме работать? Интересно…

  • Юрий, ну у меня попробуйте на сайте выделить что нибудь, каким цветом выделяется? :-)

  • У Вас на сайте у меня в браузере все работает)) А на моем сайте без webkit не работало.

  • В общем webkit нужно добавлять по любому :-)

  • Кирилл

    А у меня не меняется. в файле style.css писать надо код?

  • Кирилл, да, данный код нужно писать в style.css

  • Спасибо большое! Давно хотела изменить цвет выделения, но все забывала. А тут на одном сайте увидела, начала искать и нашла вашу инструкцию. Просто и понятно. =)

  • Ленка, очень рад, что помог Вам :-)

  • Александр, очень понравилась Ваша статья, все понятно и с толком. Не могли бы Вы подсказать как поменять цвет текста в HTML

  • Здравствуйте. Павел. Не сильно понял Ваш вопрос. Цвет только можно изменить через стили. Правда стили можно записать как в отдельный файл либо в самом коде html, например в div.

  • Алекс

    я думаю, никак! Можно с помощью css и js!

  • аааааааааааааа

    аааааааааа