0

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.

moz-selection



4. Актуальное поведение

Но у псевдоэлемента ::selection фон выделенного текста — rgb(216, 158, 096). Получается плохо. Протестировано в Chrome и Opera.

selection

Если убрать в приведённом выше коде background: sienna; color: pink;, то цвета для выделения в Chrome и Opera отображаются нормально.

selection без фона

Но если задать для тега body свойства background и color, то выделенные цвета становятся неправильными, будто происходит наложение цветов. Как его убрать, нагуглить не удалось.



5. Попытки решения

  1. Указание цвета вместо X11 в других форматах ничего не изменило.
  2. Применение атрибута contenteditable, как советуют на Stack Overflow, тоже ничего не меняет.

1 ответ 1

2

Фоновый цвет выделения в Хроме имеет некую степень прозрачности, поэтому вам надо указать свой цвет в формате RGBA, задав степень непрозрачности меньше 100%:

::selection {
  background: rgba(255, 228, 181, 0.99);
  color: lightcoral;
}

В данном случае 255, 228, 181 соответствует указанному вами цвету moccasin.

body {
  background: sienna;
  color: pink;
  margin: 0;
  font-size: 3rem;
}
 
::selection {
  background: rgba(255, 228, 181, 0.99);
  color: lightcoral;
}
Не принять мне итоги, чья щемит прямота. Отречений дороги заведут в никуда. Ты — цветок Поднебесья, Ты — улыбка в ночи, эхо сладостных песен и Венеры лучи. Ты — колибри прекрасный, Амазонки сапфир, — дочь природы несчастной в звуках музыки лир. Личность
мерно теряешь, изучая Тебя. Сон, еду забываешь, без сознанья Любя.

Живой пример на JSFiddle: jsfiddle.net/terron/nrwjLkbm/

Результат в Chrome:

Результат в Chrome

Результат в Firefox:

Результат в Firefox

4
  • terron, у ::selection и ::moz-selection разное поведение не в пользу ::selection. ::selection выделяет также картинки и шрифты. См. результаты в Firefox и Chrome. Если в случае с картинками можно задать background: transparent, то как отменить или кастомизировать выделение шрифтов, подключённых через Cufon, не понимаю. 25 ноя 2016 в 14:52
  • Кодрезультат выполнения, неважный в Chrome. Выложил на сайт, поскольку Codepen не пропускает Cufon. // Поэтому и отклонил Вашу правку и пока не принял (плюс поставил) Ваш ответ: может, на JavaScript найдётся лучшее решение, нормально выделяющее шрифты. Спасибо. 25 ноя 2016 в 14:56
  • @СашаЧерных, решить проблему с прозрачностью от части можно, подобрав такой цвет, который будет отображаться как moccasin при 50% прозрачности. Проблему с кривым выделением на Cufon не смогли решить даже на официальном сайте, где выделение слов залезает друг на друга. С другой стороны, если вы допускаете, что кто-то будет выделять или копировать текст на вашем сайте, я бы порекомендовал вам отказаться от Cufon ради UX и использовать более традиционные и православные методы подгрузки шрифтов.
    – Petr Flaks
    25 ноя 2016 в 15:02
  • terron, да, знаю, что Cufon — устаревшее решение, но много менять придётся. В Firefox шрифты вообще не выделяются. Только как реализовать это для других браузеров, не нагуглю. Спасибо. 25 ноя 2016 в 15:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.