Текст при выделении на странице другим цветом

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

Это так называемый псевдоэлемент ::selection. Можно использовать его, применив ко всей странице, можно - к отдельным текстовым элементам. Соответственно, можно задать разные цвета разным элементам.


В правилах стилей допускается использовать свойства: color, background и background-color.

Чтобы все работало в браузере Firefox, добавляем для него в наш css нестандартный псевдоэлемент:
::-moz-selection.

Вот примерный код:

/* Общее правило для всех текстовых элементов */
::selection {
    background: #f1c40f;
    color: #fff;
}
::-moz-selection {
    background: #f1c40f;
    color: #fff;
}

/* Для элементов <p> */
p::selection {
    background: #f1c40f;
    color: #fff;
}
p::-moz-selection {
    background: #f1c40f;
    color: #fff;
}
/* Для элементов с классом "post" */
.post::selection {
    background: #f1c40f;
    color: #fff;
}
.post::-moz-selection {
    background: #f1c40f;
    color: #fff;
}

Рис. 1 - Так выглядит на странице выделение текста другим цветом.

Twitter

Facebook

Google+

Вконтакте

Подписаться через Email

Подпишитесь на свежие статьи блога, и получайте новые руководства по работе с платформой "Blogger", веб дизайну, монетизации и SEO продвижению, и еще много всего.