CSS3: выделение текста в современных браузерах

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

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

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

  • FalleN

  • 2273

  • 1

  • 0

Ссылки на статью:

Похожие статьи: