Изменение цвета выделения текста в браузере

Tweet

В сегодняшнем руководстве мы научим вас, как изменять стандартный цвет выделения текста в браузере при помощи CSS.


Всем известно, что если на странице зажать левую кнопку мыши и начать перемещать мышь, будет создаваться выделение текста. Различные браузеры выделяют этот текст по-разному. Например, в моем браузере текст становится белым, а фон за ним становится серовато-синим.

Используя селектор ::selection, можно изменить стиль выделения текста. Это можно применять в различных ситуациях. Например, таким образом можно в значительной степени приукрасить свой веб-сайт, либо защитить текст страниц от копирования (ведь можно сделать так, чтобы люди не могли видеть тот текст, который они выделяют).

Воспользуйтесь следующим кодом:

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

Не забудьте также посмотреть демо - выделите любой участок текста на странице ...