CSS ::selection Pseudo Element
The ::selection pseudo-element is a highlighted part of the document. It is used to apply styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
The default text selection background color is blue, and this property is used to change the default color.
Only a few CSS properties can be used to style the ::selection pseudo-element:
- color
- background-color
- text-shadow
- cursor
- caret-color
- outline and its longhands
- text-decoration and its associated properties
- text-emphasis-color
The -moz- prefix is used with this selector in the form ::-moz-selection.
This pseudo-element was introduced in the CSS Selectors Level 3 but was removed and, currently, it is in Pseudo-Elements Level 4.
Version¶
CSS Pseudo-Elements Level 4
Syntax¶
::selection {
css declarations;
}Example of the ::selection pseudo-element:¶
<!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>Example of the ::selection pseudo-element with different colors:¶
<!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>Example of the ::selection pseudo-element with the <textarea> and <input> tags:¶
<!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>
0 Comments
CAN FEEDBACK
Emoji