Меняем цвет фона выделенного текста с помощью 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;}
Примеры
- Пример с разными фонами выделенных абзацев.
- Селектор ::selection можно использовать и для того, чтобы спрятать секретный текст
… - … или даже картинку.
- Пример прямо в этом посте. Повыделяйте текст этого поста в одном из браузеров, поддерживающих данный селектор.
Практичность применения данной штуки, конечно, под вопросом. Тем не менее она показывает, что разработчики вышеуказанных браузеров стремятся к полноценной поддержке стандартов, постепенно внедряя подобные этой функции.