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

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

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

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

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

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

::selection {
	background: #FFB7B7; /* Safari, Chrome, 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;}

Примеры

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

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

VIA

P.S. Во время тестирования селектора на этом посте, заметил, что он не работает в Safari и FireFox, если его применить к тегу списка <ul>, а работает только тогда, когда класс прописан непосредственно к элементу списка <li>.

* * *

Большой выбор только качественно компьютерной и бытовой техники предлагает официально зарегистрированный интернет магазин Донецк «Домовой». На весь ассортимент продукции имеются сертификаты, и предоставляется гарантийное обслуживание в сервисных центрах.

Комментарии (36)
  1. 1
    mercuree

    Чувак, все канешно круто, но тут не все супер пупир умные верстальшики и т.д.
    Мне вот эта фича очень понравилась. Но реализовать её не могу. т.к ты банально даже не написал как её поставить =\

  2. 3
    Suf

    Прив, слушай… не в курсе, а под IE хака пока не создали?

  3. 5
    Антон

    На самом деле, это малоизвестная фича. Вот я только вчера узнал (-:

    То, что не поддерживает ie,— их проблема, тем более люди, юзающие этот браузер, на подобные красивости и не обращают внимания.

  4. 6
    Андрей

    Проверил в IE8 работает

  5. 7
    Антон

    Работает не только background, но и color.
    В Сафари и Хроме также можно применить к картинкам, в Fx не работает.

  6. 8
    Ves

    Мне вот интересно, в последней редакции спецификации по css3-селекторам псевдо-элемент ::selection отсутствует, хотя в предыдущей редакции он был — значит ли это, что в w3c решили от него отказаться? Или я чего-то не понимаю?

  7. 9
    EGORR

    Конструкцией

    ::-moz-selection {
    background: transparent; /* FireFox */
    }

    можно в FF сделать запрет на выделение.
    Какая-никакая, но вот вам и польза..

  8. 11
    ChikabuZ
    @

    а как такое сделать в поле edit? например пишу этот комментар выделяю текст и вижу стандартный синий фон…

  9. 12
    merfo

    полезная штука, ток я еще не очень во всем этом соображаю….
    как сделать чтобы фон выделенного текста был спложным как у Вас, а то у меня получаеться с отступами между рядками: http://s010.radikal.ru/i314/1104/ab/34cfb12197a5.jpg

  10. 14
    TurboPxl
    @

    Помимо background еще работает свойство color.

  11. 15

    Большое спасибо, как раз то что искал, всё получилось.

  12. 16

    Этот псевдоэлемент — отличная возможность отойти от обыденности, в принципе, что нам и дает css.

Ваш комментарий