1. Цель
Задать произвольный цвет выделяемому тексту и его фону, если для страницы уже прописаны цвета для фона и текста, отличные от стандартных. Приветствуется любое решение, которое ничего не портит.
2. Минимальный пример кода
body {
background: sienna;
color: pink;
margin: 0;
font-size: 3rem;
}
::selection {
background: moccasin;
color: lightcoral;
}
Не принять мне итоги, чья щемит прямота. Отречений дороги заведут в никуда. Ты — цветок Поднебесья, Ты — улыбка в ночи, эхо сладостных песен и Венеры лучи. Ты — колибри прекрасный, Амазонки сапфир, — дочь природы несчастной в звуках музыки лир. Личность
мерно теряешь, изучая Тебя. Сон, еду забываешь, без сознанья Любя.
Он же на Codepen.io. Для Firefox, по-видимому, не поддерживается подсветка выделенного текста в неактивном окне.
3. Желаемое поведение
У псевдоэлемента ::-moz-selection фон выделенного текста — rgb(255, 228, 181)
, что соответствует указанному мной цвету moccasin. Протестировано в Firefox.
4. Актуальное поведение
Но у псевдоэлемента ::selection фон выделенного текста — rgb(216, 158, 096)
. Получается плохо. Протестировано в Chrome и Opera.
Если убрать в приведённом выше коде background: sienna; color: pink;
, то цвета для выделения в Chrome и Opera отображаются нормально.
Но если задать для тега body
свойства background
и color
, то выделенные цвета становятся неправильными, будто происходит наложение цветов. Как его убрать, нагуглить не удалось.