::selection
The part of the text the user has selected.
Syntax
::selection { … }Examples
A custom selection color:
<style>
p::selection { background: gold; color: black; }
</style>
<p>Select this text with the mouse to see a gold highlight.</p>Notes
Only colors, text-decoration and text-shadow can be changed. Keep the selection clearly visible: a custom color with poor contrast makes selecting text harder.
See also
- user-select — Whether the user can select the text of an element.
- color — The color of the text (and the default color of borders and SVG icons).
Related recipes
In the tutorial
- Pseudo-elements — How to style part of an element or add decorative content — before, after, first-letter, marker, placeholder and selection.