Главная->Уроки по css->Как изменить цвет выделенного текста в CSS
Как изменить цвет выделенного текста в CSS
Как изменить цвет выделенного текста в CSS. При посещении тех или иных сайтов можно заметить такую особенность, когда при выделении текста на странице, он может менять свой стиль. Такого эффекта можно достаточно просто добиться используя специальный псевдоэлемент ::selection. Вот как это работает: <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Изменяем стиль выделенного текста в CSS</title> <style> .content { color: #111; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ padding: 10px; } // применяем псевдоэлемент к нашему классу .content::selection { color: red; background: blue; } </style> </head> <body> <div class="content"> Это просто текст, который меняет свой стиль при выделении. Посмотрите как этот пример работает в браузере. </div> </body> </html> В данном примере я специально использовал контрастные цвета, красный текст на синем фоне. Вы, конечно, же можете использовать цвета из цветовой палитры вашего собственного сайта.
