CSS ::selection selector allows you to add styles to that portion of an element which is selected by the user. This selection happens when you double-click on the text or drag the mouse across the text.
For most of the browsers, the selected content has a blue background color and white text color. However, we can very easily get rid of these default colors and replace them with the ones that we like.
The following example sets a yellow background color and black text color when you select any portion of the page:
Example:
::selection{
background: yellow;
color: black;
}
You can also apply the selection colors to a particular element such as paragraph, div, list, input, textarea, etc.
See this example:
Example:
p::selection{
background: green;
color: white;
}
div::selection{
background: yellow;
color: black;
}
The background color and the font color are not the only things that you can apply to the selected portion of an element.
You can also apply the text-shadow property to the selected text.
See this example:
Example:
::selection{
text-shadow: 1px 1px 2px red;
}
Please note that only the below three properties can be used with the ::selection selector:
- The color property
- The background-color property
- The text-shadow property
CSS Syntax
The syntax of the ::selection selector is as follows:
::selection{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the ::selection selector
| Selector | |||||
| ::selection | 4.0 | 9.0 | 62.0 | 3.1 | 10.1 |
