OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I create a css rule, to undo other background on a ::selection node

  • Thread starter Thread starter MTilsted
  • Start date Start date
M

MTilsted

Guest
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.

Code:
<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>
<p>We use some code which inject css directly into the document which changes the background property for some elements using the <code>::selection</code> selector.</p>
<p>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 <code>::selection</code> had been set.</p>
<p>Changing the background on selection is easy, I can just do a:
<code>::selection { background: red; }</code></p>
<p>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 <code>::selection</code>.</p>
<p>The obvious solution would be <code>::selection { background:initial; }</code> but that don't work because that sets the background to transparent, making text selection invisible.</p>
<pre><code><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>
</code></pre>
Continue reading...
 

Latest posts

A
Replies
0
Views
1
Ashrik Ahamed
A
A
Replies
0
Views
1
Ashrik Ahamed
A

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top