Меняем цвет фона выделенного текста с помощью CSS

Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня — это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет по вашему усмотрению.

На данный момент ::selection поддерживают следующие браузеры:

  • Safari
  • FireFox
  • Opera 9.5 (начиная с билда 9770).

Safari несколько по-другому отображает результат в сравнении с FireFox и Opera (последние два браузера обрабатывают этот псевдоэлемент идентично).


Вот так это выглядит в CSS:

::selection {
background: #FFB7B7; /* Safari, Opera */
}
::-moz-selection {
background: #FFB7B7; /* FireFox */
}

С селектором ::selection будет работать только свойство background, поэтому его можно применять, например, чтобы сделать отличающийся фон выделения для нескольких разных абзацев на странице:

p.red::selection {background: #FFB7B7;}
p.red::-moz-selection {background: #FFB7B7;}p.blue::selection {background: #A8D1FF;}
p.blue::-moz-selection {background: #A8D1FF;}p.yellow::selection {background: #FFF2A8;}
p.yellow::-moz-selection {background: #FFF2A8;}

Примеры

Практичность применения данной штуки, конечно, под вопросом. Тем не менее она показывает, что разработчики вышеуказанных браузеров стремятся к полноценной поддержке стандартов, постепенно внедряя подобные этой функции.

Оригинал

4 комментария to “Меняем цвет фона выделенного текста с помощью CSS”

  1. Пробуйте 🙂 Потом свои впечатления в блог ))

  2. Kiska^^:

    Ничего же не понятно( куда текст, который хочешь покрасить вводить надо?

  3. Сергей:

    клева.. спасибо!

Leave a Reply