We use some code which inject css directly into the document which changes the background property for some elements using the ::selection
selector.
We can’t really change this code, but for some elements we want to revert their state back so they look/behave as if no background on ::selection
had been set.
Changing the background on selection is easy, I can just do a:
::selection { background: red; }
To make the background of all selected text red, but there does not seem to be any way to style the elements to look as if no style had ever been applied to ::selection
.
The obvious solution would be ::selection { background:initial; }
but that don’t work because that sets the background to transparent, making text selection invisible.
<style>
div::selection { background-color:red; }
/** Here I need something which undo the rule setting the
background-color to red on selection
*::selection { background-color:initial !important; } does set the background on selection to transparent.
*/
</style>
<div>This is text</div>
3
Answers
You can manually specify a colour that closely resembles the default selection colour for specific text or elements. For example:
and style it like
If you need to set whatever property to its default value, you can use the
initial
keyword. As stated in the docs:Here it is an example with the
::selection
selectorYou are looking for
SelectedItem
andSelectedItemText
(https://drafts.csswg.org/css-color-4/#valdef-color-selecteditem)