Псевдоэлемент CSS ::selection
Псевдоэлемент ::selection выделяет часть документа. Он используется для применения стилей к части документа, выделенной пользователем (например, при клике и перетаскивании мыши по тексту).
По умолчанию цвет фона выделения текста синий, и это свойство используется для изменения цвета по умолчанию.
Для стилизации псевдоэлемента ::selection можно использовать лишь несколько свойств CSS:
- color
- background-color
- text-shadow
- cursor
- caret-color
- outline и его длинные аналоги
- text-decoration и связанные с ним свойства
- text-emphasis-color
INFO
Для этого селектора используется префикс -moz- в виде ::-moz-selection.
Этот псевдоэлемент был введён в спецификации CSS Selectors Level 3, но позже удалён, и в настоящее время он находится в Pseudo-Elements Level 4.
Версия
Синтаксис
Псевдоэлемент CSS ::selection
::selection {
css declarations;
}Пример использования псевдоэлемента ::selection:
Пример кода CSS ::selection
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
::-moz-selection {
color: #eee;
background: #8ebf42;
}
::selection {
color: #eee;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Пример псевдоэлемента ::selection с разными цветами:
Пример псевдоэлемента ::selection с разными цветами:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.green::-moz-selection {
background-color: #8ebf42;
}
.green::selection {
background-color: #8ebf42;
}
.yellow::-moz-selection {
background-color: #FFFF19;
}
.yellow::selection {
background-color: #FFFF19;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>This is a text with the default selection background-color.</p>
<p class="green">Select this text to see a green background.</p>
<p class="yellow">Select this text to see a yellow background.</p>
</body>
</html>Пример псевдоэлемента ::selection с тегами <textarea> и <input>:
CSS ::selection, ещё один пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>
<h2>::selection selector example</h2>
<p>Input element</p>
<form>
<input type="text" value="Select this input text" />
<p>Textarea element</p>
<textarea rows="5" cols="25">Select this textarea text</textarea>
</form>
</body>
</html>Практика
Что можно сделать с помощью псевдоэлемента ::selection в CSS?