Как изменить цвет фона выделенного текста в браузерах?

Question

Мы все знаем, что когда мы выбираем текстовую часть в браузере, его цвет фона меняется на синий. Это способ изменить этот цвет через CSS или JavaScript?

Answer 1

Да: вы можете использовать псевдоэлементы ::selection и ::-moz-selection ( MDN ), которые позволяют вам задавать основной и фоновый цвета выбранного контента. Это будет работать во всех основных браузерах, кроме IE <9, для которых нет альтернативы. </p>

::selection {
    background: pink;
    color: yellow;
}

::-moz-selection {
    background: pink;
    color: yellow;
}

Answer 2

Internet Explorer для Windows

1. В меню Сервис выберите Свойства обозревателя ....

2.Нажмите вкладку Общие, а затем нажмите кнопку Цвета ....Вы можете выбрать посещенные, не посещенные и наведенные цвета.Снимите флажок Использовать цвета Windows, если вы также хотите установить пользовательские цвета текста и фона.Нажмите ОК.Примечание. В Internet Explorer 7 или более поздней версии вам необходимо снять флажок Использовать цвета Windows, чтобы изменить любой из цветов по умолчанию.

3.Если вы хотите переопределить цвета, заданные страницами, своими собственными, нажмите «Доступность», а затем установите флажок «Игнорировать цвета, указанные на веб-страницах».Нажмите ОК.

4.Нажмите ОК, чтобы сохранить изменения и закрыть окно «Свойства обозревателя».Safari Safari не позволяет легко изменять цвет фона, текста, посещенной ссылки и непосещенных ссылок.Однако вы можете использовать свои собственные таблицы стилей для просмотра веб-страниц:

В меню Safari выберите «Настройки» ....

2.В открывшемся окненажмите Дополнительно.

3.В раскрывающемся меню рядом с «Таблицей стилей:» выберите «Другие ...», а затем перейдите к таблице стилей, которую вы хотите использовать.

4.Нажмите «Выбрать».

Firefox 3.x

1.Если вы используете Windows или Linux, в меню Сервис выберите Параметры ....В Mac OS X в меню Firefox выберите «Настройки ...».

2.Нажмите «Контент».В разделе «Шрифты и цвета» нажмите «Цвета ...».

3.Выберите цвета для фона, текста, посещенных ссылок и непосещенных ссылок.

4.Если вы хотите переопределить настройки цвета сайтов своими собственными, снимите флажок Разрешить страницам выбирать свои собственные цвета вместо моих вариантов выбора выше.

Answer 3

Для наиболее полной работы вы можете использовать несколько селекторов с одинаковыми функциями, но используемыми в разных браузерах:

::selection {
    background: orange;
    color: white;
}

::-moz-selection {
    background: orange;
    color: white;
}

::-webkit-selection {
    background: orange;
    color: white;
}

::-o-selection {
    background: orange;
}

::-ms-selection {
    background: orange;
    color: white;
}

-moz- Firefox.

-webkit- Safari и Chrome.

-o- Opera.

-ms- Internet Explorer.