X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2018-12-12
  • 1319 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Когда Вы создаете дизайн для своего сайта или какой-то страницы, Вы можете использовать всевозможные цветовые схемы. Иногда нужно использовать такую схему, при которой выделенный текст просто незаметен. Для некоторых это не проблема и вообще незаметный факт, но есть сайты, которые служат тому, чтобы с них копировали информацию.

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

Столкнувшись с тем, что выделенный текст, попросту не видно, Вы можете изменить внешний вид выделенного текста и сделать так чтобы все стало так, как нужно. Поможет Вам в этом CSS. В частности параметр - selection.

Если Вам надо задать всему сайту одинаковые стили выделения текста, то просто допишите в файл стилей следующие строки, которые по сути одно и то-же, но выполняют задачу по кроссбраузерности:

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

Можете поменять цвет выделения и цвет текста на нужный Вам. Если нужно присвоить разные стили для отдельных абзацев или определенных элементов, перед параметром ::selection пропишите класс или id нужного элемента. НАпример:

.block::selection {
background: #ffb7b7;
color:#fff;
}

Все просто и при правильном подходе поможет Вам решить маленькую проблему, которая может появится. Лично я использовал этот способ в противоположном назначении. Заказчик попросил сделать так, чтобы выделенный текст не имел фона и цвет не менялся. При выделении было такое ощущение, что текст не выделен. Своего вида защита от копипаста :), хоть и не очень действенна.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 4, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.