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

    Text Selection Color

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

    Начнем:

    ::selection {
    background: #ffb7b7; /* Safari */
    }
    ::-moz-selection {
    background: #ffb7b7; /* Firefox */
    }


    Цвет выделения текста будет, как можно догадаться, красным. Можно добавить несколько параграфов и определить для них разные цвета выделения.

    [ПРИМЕР]

    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;
    }


    Поделиться публикацией
    Комментарии 40
      +2
        –5

        не в тему, но интересно причем тут wordpress?)
          0
          Раза три перечитал пост, но так и не понял о чём вы...
            0
            Извините, не заметил картинку — долго грузилась.
              +2
              как связаны футурико и wordpress?
            +2
            Круто, очень понравилось и полезно.
            Спасибо! ;)
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                Интересная и полезная статья.
                Но так и не понятно, почему браузеры не хотят сразы выробатывать стандарты для css3.
                  0
                  Спасибо за информацию)
                    0
                    В конке пашет. Видимо поэтому и в Сафари пашет.
                      0
                      ой как интересно!!! пригодится... Спасибо автору, даже не думал что такое возможно
                        0
                        http://metaatem.net/make_selection.php
                        Можно автоматически сгенерировать фон из картинки!
                          +2
                          +1
                          Интересно зачем это надо?

                          Но радует что в опере всё работает.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              +3
                              В 9.5, там движок новый.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  +1
                                  Угу, ждем IE 12...
                          +1
                          Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному.

                          В последней бете Оперы всё работает нормально. Релиз, 9.23 не поддерживает.
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • НЛО прилетело и опубликовало эту надпись здесь
                            +3
                            Йолки палки!

                            Раньше, на сайтах с совершенно нечитаемым сочетанием фона и текста достаточно было нажать Ctrl+A, чтобы прочитать текст. Боюсь, теперь любители новых веяний в дизайне заберут и эту возможность. :(
                              0
                              Возможно отключить стили в нормальных браузерах никуда не денется. ;-)
                              +5

                              Начнем:

                              ::selection {
                              background: #ffb7b7; /* Safari */
                              }
                              ::-moz-selection {
                              background: #ffb7b7; /* Firefox */
                              }

                              Цвет выделения текста будет, как можно догадаться, красным.

                              а в моем босоногом детстве считали что красный это #FF0000 ...
                                0
                                #ffb7b7 это не красный, а оттенок красного. Зачем придираться к словам? Суть от этого не изменилась.
                                0
                                А зачем это надо?
                                  0
                                  Спасибо
                                    0
                                    Зачем это надо?
                                    Возможно другие браузеры выставили приоритеты на время добавления функций? И что-то мне подсказывает, что эта фукнциональность имеет не самый большой приоритет.
                                      0
                                      В Сафари криво (( жалко - я думал он от файрфокса не отстает..
                                        0
                                          0
                                          В сафари выделение само по себе кривое и без css3 штучек.
                                        0
                                        Opera

                                        Version
                                        9.25
                                        Build
                                        8827

                                        не работает.
                                          0
                                          9.50 - 9770
                                          работает
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            +2
                                            IE - сакс!
                                              0
                                              не говори. Одна вёрстка чего стоит: Работает везде - не работает в ИЕ, работает в ИЕ - не работает везде. ужас
                                              0
                                              Вообще - интересно. Хотелось, что бы все браузеры поддерживали стандарты одинаково.
                                              С другой стороны - а зачем нужно менять цвет выделения?
                                                0
                                                Красиво. Но, думается мне, ничего более.
                                                  0
                                                  Круть, можно писать скрытые послания, выделяя определенные буквы в тексте.

                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                  Самое читаемое