Главная›CSS-верстка

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

36 комментариев

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

* * *

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

Смотрите также

Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome

114 комментариев

Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний “телодвижений”. ...

Internet Explorer 8 проходит тест Acid2

17 комментариев

Что-то много в последнее время мне глаза попадается информации, касаемой браузеров и поддержки ими стандартов. И мне это обстоятельство несомненно очень даже нравится. На хабре рассказали о том, что ожидаемая ...

Обновил дизайн моего блога WPhacks.name

31 комментарий

Благодаря технологии CSS3, сегодня можно творить потрясающие дизайнерские вещи, причем не прибегая даже к помощи Photoshop или других дизайнерских программ. В частности, в этом помогают такие замечательные CSS3-свойства, поддерживаемые современными ...

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

  1. Максим Покровский
    18 февраля 2008 г. в 18:41

    Занятная фича. По моему очень интересно будет смотрется на сайте с разынми цветовыми блоками.

  2. Dimox
    18 февраля 2008 г. в 18:43

    Максим, да, я видел на каком-то сайте пример выделения под цвет общего дизайн – приятная мелочь.

  3. cross
    20 февраля 2008 г. в 23:57

    Нужно иметь не голову, а справочник, чтобы помнить все эти приятные мелочи :)

  4. PE3UDEHT
    23 февраля 2008 г. в 08:44

    Интересно, а в гугли используют такуюже фишку, когда выделяю искомые тобой слова или там , что то другое?

  5. Веб дедушка
    16 июня 2008 г. в 14:57

    Бестолковые рассуждения полезна фича или нет. Она бесполезна хотя бы потому, что не является кроссбраузерной, всё остальное – можете оставить. Более того, она настолько НЕ кроссбраузерна, что 90% пользователей сети (которые используют MSIE) даже не увидят ваших заморочек. Если вас греет мысль о том, что те жалкие 10% юзеров, что пользуются мозилой и сафари, увидят “вашу фичу”, – останавливать от её использования не стану :)

  6. Andres
    10 июля 2008 г. в 13:48

    Приятная вещь. Все споры о полезности считаю бессмысленными, т.к. ком-то до полного счастья не хватает этой фишки, а кому-то она до фонаря.

  7. SHAMo
    2 января 2009 г. в 14:15

    Классное “начало праздника”! Ждем новые приятные, а главное – “удобные” элементы от W3C… Кстати, первым делом, как зашел в блог, заметил желтенькое выделение: было жутко приятно)))

  8. Ян Такушевич
    26 января 2009 г. в 03:44

    Ссылка “спрятать секретный текст :) …” выдает 404

  9. mercuree
    28 апреля 2009 г. в 14:36

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

    1. Dimox
      28 апреля 2009 г. в 14:55 / ответ на коммент mercuree

      Изучай CSS, и все станет ясно.

  10. Suf
    12 мая 2009 г. в 14:20

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

    1. Dimox
      12 мая 2009 г. в 17:46 / ответ на коммент Suf

      Вряд ли.

  11. Антон
    22 мая 2009 г. в 11:26

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

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

  12. Андрей
    17 июня 2009 г. в 22:35

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

  13. Антон
    7 июля 2009 г. в 05:36

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

  14. Ves
    9 июля 2009 г. в 12:00

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

  15. EGORR
    25 марта 2010 г. в 15:58

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

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

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

    1. SelenIT
      11 марта 2011 г. в 00:07 / ответ на коммент EGORR

      Запрет выделения в FF делается проще, тоже через CSS3 — -moz-user-select:none.

  16. ChikabuZ
    11 ноября 2010 г. в 18:48

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

  17. merfo
    18 апреля 2011 г. в 18:57

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

    1. Dimox
      18 апреля 2011 г. в 20:14 / ответ на коммент merfo

      Это зависит от высоты строки, которая в CSS задается свойством line-height.

  18. TurboPxl
    10 марта 2012 г. в 11:47

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

  19. Toha
    27 мая 2012 г. в 15:32

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

  20. Максим
    4 ноября 2015 г. в 01:12

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

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

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.