css Question posted in
Some basic documentation can be found here.

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

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>
Tags:

3

Answers


  1. 0

    You can manually specify a colour that closely resembles the default selection colour for specific text or elements. For example:

    <body>
  <p>This text will have a red background when selected.</p>
  <div>This text will have a light blue background when selected, similar to default.</div>
</body>

    and style it like

    <style>
    ::selection {
      background: red;
    }

    div::selection {
      background: #b3d4fc; /* Light blue similar to default */
      colour: #000; /* Black text */
    }
</style>
    Login or Signup to reply.
  2. 0

    If you need to set whatever property to its default value, you can use the initial keyword. As stated in the docs:

    The initial CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property

    Here it is an example with the ::selection selector

    .sel::selection {
  background-color: red;
}
.sel {
  background-color: initial;
}

::selection {
  background-color: red;
}
div::selection {
  background-color: initial;
}
    <div><p>This text is inside a div</p></div>
<p class="sel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. At in tellus integer feugiat scelerisque varius. Congue nisi vitae suscipit tellus mauris a diam maecenas. Nunc eget lorem dolor sed. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Nunc aliquet bibendum enim facilisis gravida neque convallis a. In egestas erat imperdiet sed euismod nisi porta. Tempor id eu nisl nunc mi ipsum faucibus. Id velit ut tortor pretium viverra suspendisse potenti. Ipsum a arcu cursus vitae congue. Vitae nunc sed velit dignissim sodales ut. Duis ultricies lacus sed turpis tincidunt id aliquet. Tempus egestas sed sed risus pretium. Tortor aliquam nulla facilisi cras fermentum. Volutpat est velit egestas dui id ornare. Penatibus et magnis dis parturient. Egestas integer eget aliquet nibh praesent.</p>
    Login or Signup to reply.
  3. 0

    You are looking for SelectedItem and SelectedItemText (https://drafts.csswg.org/css-color-4/#valdef-color-selecteditem)

    div::selection {
  background-color: red
}

div::selection {
  background-color: SelectedItem;
  color: SelectedItemText;
}
    <div>This is text</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search