CSS: как сменить цвет выделения текста в современных браузерах

Have a question? Ask in chat with AI!

выделение текстаВ этом небольшом мануале рассмотрим как быстро и легко сменить цвет выделения текста в современных браузерах с помощью CSS3. Под выделение текста мы подразумеваем выделение текста с помощью курсора мыши на текущей странице в браузере. Разные браузеры по разному выделяют текст. К примеру, в Google Chrome, которым я пользуюсь, при выделении текст становиться белым, а фон голубым. Давайте посмотрим, как изменить эти цвета.

[adsense]
Посмотреть демо
Для смены цвета выделения текста мы будем использовать CSS селектор ::selection. Использовать эту возможность можно для разных целей: например, уникализация дизайна вашего сайта, либо возможность защитить текст от копирования — подобрать такие цвета, при которых будет очень сложно понять, что человек выделил. Для замены цвета выделения текста используйте вот такой CSS сниппет:

/* webkit, opera, IE9 */
.blue::selection {
    background:blue;
}
/* mozilla firefox */
.blue::-moz-selection {
    background:blue;
}
 
/* webkit, opera, IE9 */
.red::selection {
    background:red;
}
/* mozilla firefox */
.red::-moz-selection {
    background:red;
}
 
/* webkit, opera, IE9 */
.hide::selection {
    background:white;color:white;
}
/* mozilla firefox */
.hide::-moz-selection {
    background:white;color:white;
}

Посмотреть демо

Как продвинуть сайт с помощью QR-кода — очень интересная статья на блоге о маркетинге моего друга http://www.markevich.ru


4 комментария для “0

  1. Непонятно объяснили.
    Мне бы подробнее, так как я хочу изменить цвет выделения на всем сайте!

Добавить комментарий для Wallian_Fergus Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись 3D аккордеон на CSS3
Следующая запись Полезное: онлайн-переводчик Dicter