Как изменять стандартный цвет выделения текста в браузере при помощи CSS

12.01.2012Просмотров: 71
Урок, как изменять стандартный цвет выделения текста в браузере при помощи 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;
}

Постоянная ссылка на публикацию

Из этой рубрики:

Нет комментариев

Веб-дизайн - это знание.

Веб-дизайн сегодня превратился в самостоятельное явление просто потому, что для занятия дизайном в Интернет недостаточно одного знания программ, предназначенных для работы с графикой и художественных способностей.

Дизайн и слово

Главный способ донести до посетителя нужную информацию — написать об этом. Вот прямо так буквами и написать. Запомните, не может быть хорошего дизайна с плохим текстом. Хороший текст должен быть лаконичным, структурированным и без ошибок

Дизайн и красота

Красив не тот сайт, который разрывает мозг обилием картинок и цветов, а тот, который максимально элегантно решает возложенные на него задачи.