Как изменить цвет фона выделенного текста?

Для того, чтобы поменять фоновый цвет при выделении текста со стандартного на желаемый, будем использовать псевдо-элемент ::selection (с псевдо-классом :last-child мы уже сталкивались ранее, когда создавали древовидный список).

К сожалению, ::selection используется только в CSS3 и поддерживается далеко не всеми браузерами, на данный момент - FireFox, Safari и Opera 9.5

Плюс этого приема в том, что можно логически выделять на страницах нужные блоки. Вот есть у вас сайт с автомобильной тематикой, продвигаете вы внутреннюю страницу (или даже рекламируете ее с помощью контекста), чтобы компенсировать потраченные деньги, нужно, чтобы посетители конвертировались в покупателей. Для этого мы берем какой-то логически законченный блок текста, пусть он будет о плюсах покупки автомобилей в Мурманске. Чтобы привлечь к нему внимание, надо его аккуратно выделить и стилизовать. Вот в этом случае на и поможет фоновая заливка. дело в том, что люди при чтении текста имеют привычку выделять текст по мере чтения. Просто так удобней воспринимать. А вот теперь представьте, что помимо просто фоновой заливки, клиенты заметят при выделении не стандартный синий с белым, а фон, стилизованное под общую цветовую гамму сайта.

Все достаточно просто, надо только в таблице стилей прописать background:


p::selection {
background: #c9defd; /* для Safari, Opera */
}
p::-moz-selection {
background: #c9defd; /* для FireFox */
}


Если хотим сделать разное цветовое выделение для разных абзацев (как на рисунке), то прописываем несколько стилей, например:


p.blue::selection {background: #c9defd;}
p.blue::-moz-selection {background: #c9defd;}
p.red::selection {background: #ffc2c8;}
p.red::-moz-selection {background: #ffc2c8;}
p.green::selection {background: #c4fcc5;}
p.green::-moz-selection {background: #c4fcc5;}


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

Спасибо за добавление статьи в: