CSS has a reference which can be used to customise the styling when an element is selected.
With the CSS selection the styling of the selected content can be set. For example the background colour and font colour can be changed when highlighting a section of text.
In CSS the configuration is shown as ::selection{}. It may be further restricted in the usual way by preceding with an element type or class
Here’s an example of its use:
#content::selection {background: lemonchiffon;color:red; }
#content::-moz-selection {background: lemonchiffon;color:red; }
In the above example there is the all-purpose version of CSS selection followed by the Mozilla specific version.
Unlike many CSS options associated with an element selection only supports limited property options. At the time of writing w3schools was listing just 4 options.
- color
- background
- cursor
- outline
Mozilla’s mdn page was showing 9.
- color
- background-color
- caret-color
- cursor
- text-shadow
- text-decoration
- text-emphasis-color
- outline
Note. w3schools doesn’t differentiate between the various background options, it simply shows as background. Testing showed that only the background. Mozilla categorically excludes background-image.
Your options are limited when using the CSS selection, but maybe helpful in creating the differentiation when the action is made.
