X
  • Дизайн и разработка сайта
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2022-07-03
  • 2611 переглядів

    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
Читайте також