Меняем цвет фона выделенного текста с помощью CSS
Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня - это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет по вашему усмотрению.
На данный момент ::selection поддерживают следующие браузеры:
- Safari;
- Google Chrome;
- FireFox;
- Opera 9.5 (начиная с билда 9770).
Safari несколько по-другому отображает результат в сравнении с FireFox и Opera (последние два браузера обрабатывают этот псевдоэлемент идентично).
Вот так это выглядит в CSS:
1 2 3 4 5 6 | ::selection { background: #FFB7B7; /* Safari, Chrome, Opera */ } ::-moz-selection { background: #FFB7B7; /* FireFox */ } |
С селектором ::selection будет работать только свойство background, поэтому его можно применять, например, чтобы сделать отличающийся фон выделения для нескольких разных абзацев на странице:
1 2 3 4 5 6 7 8 | 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 можно использовать и для того, чтобы спрятать секретный текст :) …
- … или даже картинку.
- Пример прямо в этом посте. Повыделяйте текст этого поста в одном из браузеров, поддерживающих данный селектор.
Практичность применения данной штуки, конечно, под вопросом. Тем не менее она показывает, что разработчики вышеуказанных браузеров стремятся к полноценной поддержке стандартов, постепенно внедряя подобные этой функции.
P.S. Во время тестирования селектора на этом посте, заметил, что он не работает в Safari и FireFox, если его применить к тегу списка <ul>, а работает только тогда, когда класс прописан непосредственно к элементу списка <li>.
* * *
Большой выбор только качественно компьютерной и бытовой техники предлагает официально зарегистрированный интернет магазин Донецк «Домовой». На весь ассортимент продукции имеются сертификаты, и предоставляется гарантийное обслуживание в сервисных центрах.
Запрет выделения в FF делается проще, тоже через CSS3 — -moz-user-select:none.
полезная штука, ток я еще не очень во всем этом соображаю….
как сделать чтобы фон выделенного текста был спложным как у Вас, а то у меня получаеться с отступами между рядками: http://s010.radikal.ru/i314/1104/ab/34cfb12197a5.jpg
Это зависит от высоты строки, которая в CSS задается свойством line-height.