Как изменить цвет по умолчанию выделенного текста с помощью CSS
Содержание
- Как изменить цвет шрифта при выделении текста
- Как изменить фоновый цвет при выделении текста
- Как изменить цвет тени при выборе текста
- Как изменить цвет полей Textarea и Input при выборе текста
- Как изменить цвет выбранного изображения
- Как создать разные эффекты выделения для одного и того же элемента на одной странице
- Как применить эффекты выделения для всей страницы
Каждый раз, когда пользователь выбирает текст для выделения, автоматически применяется какой-нибудь фоновый цвет, а иногда может меняться цвет текста. Если вы раньше не заметили этого, просто выделите это предложение, чтобы увидеть фоновый цвет текста.
Если вам не нравится синий цвет, или по какой-либо другой причине (например, это может быть связано с дизайном вашей веб-страницы) вы хотите изменить цвет выделения, CSS3 дает эту возможность!
Псевдоэлемент ::selection является известной функцией CSS3, который переопределяет цвет выделенного текста на уровне браузера или системы. Он также дает возможность указать цвет и фон для выбранного пользователем текста.
Можно изменить цвет/фоновый цвет определенных элементов или всей веб-страницы.
Количество свойств, используемых с этим псевдоэлементом, ограничено. С помощью псевдоэлемента ::selection можно изменить значения только трех свойств (color, background-color и text-shadow). В этой статье мы покажем, каким будет эффект для каждого из этих свойств.
Как изменить цвет шрифта при выделении текста
Чтобы изменить цвет элемента, необходимо добавить стиль к элементу с помощью псевдоэлемента ::selection. Можно изменить только цвет шрифта, а также цвет шрифта вместе с фоном.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.green::-moz-selection{
color: #8ebf42;
}
.green::selection{
color: #8ebf42;
background-color: initial;
}
.bg-green::-moz-selection{
background-color: #8ebf42;
}
.bg-green::selection{
background-color: #8ebf42;
}
.bg-transparent::-moz-selection{
color: #8ebf42;
background-color: transparent;
}
.bg-transparent::selection{
color: #8ebf42;
background-color: transparent;
}
.white-green::-moz-selection{
color: #fff;
background-color: #8ebf42;
}
.white-green::selection{
color: #fff;
background-color: #8ebf42;
}
</style>
</head>
<body>
<p class="green">Выберите этот текст и увидите зеленый цвет шрифта и фон по умолчанию.</p>
<p class="bg-green">Выберите этот текст и увидите цвет шрифта по умолчанию и зеленый фон.</p>
<p class="bg-transparent">Выберите этот текст и увидите зеленый цвет шрифта без фонового цвета.</p>
<p class="white-green">Выберите этот текст и увидите белый цвет шрифта и зеленый фоновый цвет.</p>
</body>
</html>В этом примере фоновый цвет по умолчанию - это цвет данного сайта.
Как изменить фоновый цвет при выделении текста
Здесь нужно применить то же самое, только для фонового цвета. Просто добавьте стиль к элементу с помощью ::selection и установите выбранный вами цвет для свойства background-color.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.green::-moz-selection{
background-color: #8ebf42;
}
.green::selection{
background-color: #8ebf42;
}
.yellow::-moz-selection{
background-color: #ffcc00;
}
.yellow::selection{
background-color: #ffcc00;
}
</style>
</head>
<body>
<p>Текст с фоновым цветом по умолчанию.</p>
<p class="green">Выберите этот текст и увидите зеленый фон.</p>
<p class="yellow">Выберите этот текст и увидите желтый фон.</p>
</body>
</html>Как изменить цвет тени при выборе текста
Используйте дальше псевдоэлемент ::selection для добавления, удаления или изменения вида текстовой тени при выделении.
Вам необходимо только установить свойство text-shadow для псевдоэлемента ::selection.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
/* before selection */
.shadow2{
text-shadow: 1px 1px 1px;
}
.shadow3{
text-shadow: 1px 2px 4px #000;
}
.shadow4{
text-shadow: 1px 2px 4px;
}
/* after selection */
.shadow1::-moz-selection{
text-shadow: 1px 1px 1px;
background-color: transparent;
}
.shadow1::selection{
text-shadow: 1px 1px 1px;
background-color: transparent;
}
#shadow2::-moz-selection{
text-shadow: none;
background: #fffae6;
}
.shadow2::selection{
text-shadow: none;
background: #fffae6;
}
.shadow3::-moz-selection{
text-shadow: 1px 1px 2px #222;
}
.shadow3::selection{
text-shadow: 1px 1px 2px #222;
}
.shadow4::-moz-selection{
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
.shadow4::selection{
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
</style>
</head>
<body>
<p class="shadow1">Выделите текст и увидите его тень.</p>
<p class="shadow2">Выделите текст, чтобы удалить его тень.</p>
<p class="shadow3">Выделите текст, чтобы он стал яснее.</p>
<p class="shadow4">Выделите текст, чтобы изменить цвет его тени.</p>
</body>
</html>Как изменить цвет полей Textarea и Input при выборе текста
Также возможно изменить цвет при выделении текста для полей <textarea> и <input>. Давайте рассмотрим пример с псевдоэлементом ::selection с элементами textarea и input:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
input::-moz-selection{
color: #1c87c9;
background-color: #eee;
}
input::selection{
color: #1c87c9;
background-color: #eee;
}
textarea::-moz-selection{
color: white;
background-color: #8ebf42;
}
textarea::selection{
color: white;
background-color: #8ebf42;
}
</style>
</head>
<body>
<p>Элемент input</p>
<form><input type="text" value="Выделите этот input текст" /></form>
<p>Элемент textarea</p>
<textarea rows="5" cols="25">Выделите этот textarea текст</textarea>
</body>
</html>Как изменить цвет выбранного изображения
Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection. Смотрите пример сами:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
img {
padding: 10px;
}
#img2::-moz-selection{
background-color: #d9d9d9;
}
#img2::selection{
background-color: #d9d9d9;
}
</style>
</head>
<body>
<p>Здесь второе изображение при выделении становится серым.</p>
<p>Выделите обе изображения, чтобы увидеть разницу.</p>
<img id="img1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
<img id="img2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</body>
</html>Представьте, что у вас есть 4 параграфа, и вы хотите применить разные цвета для каждого из них по отдельности.
В таком случае необходимо изменить цвет выделения для разных параграфов или разных разделов страницы.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p.green::selection {
background: #8ebf42;
}
p.green::-moz-selection {
background: #8ebf42;
}
p.blue::selection {
background: #1c87c9;
}
p.blue::-moz-selection {
background: #1c87c9;
}
p.yellow::selection {
background: #ffcc00;
}
p.yellow::-moz-selection {
background: #ffcc00;
}
p.red::selection {
background: #ff6666;
}
p.red::-moz-selection {
background: #ff6666;
}
</style>
</head>
<body>
<p class="green">Выберите текст, и он выделится зеленым цветом.</p>
<p class="blue">Выберите текст, и он выделится синим цветом.</p>
<p class="yellow">Выберите текст, и он выделится желтым цветом.</p>
<p class="red">Выберите текст, и он выделится красным цветом.</p>
</body>
</html>Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.
Применение эффектов выделения к определенным элементам может быть напрасной потерей времени, если просто необходимо иметь одинаковый эффект для всей страницы вашего сайта. Использование псевдоэлемента ::selection дает возможность задать цвет выделения для всей страницы без его применения к определенным элементам.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
::-moz-selection{
color: #fff;
background-color: #8ebf42;
}
::selection{
color: #fff;
background-color: #8ebf42;
</style>
</head>
<body>
<h3>Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы.</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</body>
</html>Добавление стиля с помощью этого псевдоэлемента в соответствии с цветами вашего сайта (вместо использования скучного синего фонового цвета при выделении текста) может сделать вашу веб-страницу интересным. Для определенной части вашей страницы можете выбрать фоновый цвет выделения или применить разные цвета для разных частей.