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

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

Посмотреть демо
Для смены цвета выделения текста мы будем использовать 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