Изменяем цвет выделения или псевдоэлемент selection:
Из блога Писклова 
Привет друзья! В данной статье я расскажу вам про новое свойство css, при помощи которого можно изменять цвет выделения текста. По-сути, свойство не особо нужное, но смотрится красиво. В самом конце статьи выкладываю пример. Можете посмотреть, как все будет выглядеть.
Немного слов о свойстве. Как говорил выше, свойство новое, и относится к 3 версии css. Кстати, я уже писал про еще одно свойство css3 — градиент css. Не все браузеры смогут с ним корректно работать или вообще работать. Но уж я не знаю, насколько древний должен быть браузер, чтобы он не поддерживал css3. Хотя, как показывает статистика и моего блога, и многих других, есть такие персонажи, которые с настырным упорством не хотят обновляться. Ну и да ладно.
Итак, приступим к реализации. Первым делом найдем файл style.css. Находится он папке вашего шаблона. Открываем и смотрим, какой код нужно вставить в файл.
::selection {
background: # 00b72f;
}
::-moz-selection {
background: # 00b72f;
}
Можете сохранить и посмотреть результат. Кстати, обязательно вставляем эти два свойства. Префикт –moz- — для отображения в мозилле.
В принципе, все готово. Но мы рассмотрим еще несколько дополнений. Например, изменим цвет шрифта при выделении. Нужно к вышеуказанным свойствам добавить color. Пусть цвет будет красный, тогда добавляем color:red; так
::selection {
background: # 00b72f;
color:red;
}
::-moz-selection {
background: # 00b72f;
color:red;
}
Смотрим, радуемся.
Идем далее. Изменим цвет выделения для заголовка h2 с классом orange. Пишем
h2.orange::selection {
background: # f29e1a;
color:# 0012ff;
}
h2.orange::-moz-selection {
background: # f29e1a;
color:# 0012ff;
}
Пробуем выделять. Цвет выделения изменился на оранжевый и цвет текста на синий.
Таким вот образом, можно изменять цвета чего угодно. Так что экспериментируйте, пробуйте.
Появились какие-то вопросы? Задаем в комментариях.
Пример
Магазин готовых бизнес планов — http://www.bi-plan.ru. Вопросы: Как создать бизнес? Что самое важное в бизнесе? сразу отпадут.
Загрузка ...