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

4 09 2008

Одна из интересных возможностей спецификации 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;}

Примеры

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

Оригинал


Actions

Информация

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

26 09 2008
EG Zombie (13:24:30) :

испробуем-с

27 09 2008
Анатолий (20:52:31) :

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

17 11 2009
Kiska^^ (18:47:04) :

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

21 02 2012
Сергей (16:35:27) :

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

Оставить комментарий

Вы можите использовать теги : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Реклама от партнеров: промокод ламода июнь 2016 | Классическая теория социальной экономики www.econbook.ru/theory | Спецификации немецких автомашин VW Passat | Все лучшее медиа тут цена.