Invert colors inside selection

Question

I'm making my website and I ran into a problem.

I'm trying to invert colors in text selection. I tried this, but it doesn't work:

::selection {
    fiter: invert();
}

::selection {
  color: white;
  background-color: black;
}
.p1 {
    color: black;
    background-color: white;
}
.p2 {
    color: red;
    background-color: white;
}
.p3 {
    color: cyan;
    background-color: black;
}

<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
<p class="p3">After select I want paragraph 2 to look like this:</p>

Can you help me please?

See https://developer.mozilla.org/en-US/docs/Web/CSS/::selection Only certain CSS properties can be used with ::selection. The list is pretty short and filter isn't one of them (nor is invert). You may have to resort to Javascript for a general solution. — A Haworth, Sep 18 '21 at 15:25
Does this solve your problem? https://stackoverflow.com/questions/17741629/how-can-i-invert-color-using-css/58460326#58460326 — Anshuman Yadav, Sep 18 '21 at 15:42
oh it actually doesn't work, you found a bug! good job! now report it (somewhere). — Flash Thunder, Sep 19 '21 at 09:16
@FlashThunder it's not a bug (that filter doesn't work in a selection pseudo element), it's expected behavior. — A Haworth, Sep 19 '21 at 11:07
for me it's a bug, but I know that they do defend themselves in documentation — Flash Thunder, Sep 19 '21 at 11:20

score 2 · Accepted Answer · answered Sep 19 '21 at 09:08

I cannot see how to do this in a complex case, where the selection contains several HTML elements that might be setting color and background color individually (though of course some complex HTML/CSS parsing must be able to do that but I'm not capable).

However, we can fairly simply deal with the straightforward case where the color and background color are consistent across the parent div of the selection.

On a selection event this snippet reads the computed style of the parent element, calculates the inverse of the color and backgroundColor and sets CSS variables to these which are picked up and used in the selection pseudo element.

document.addEventListener('selectionchange', (e) => {
  function invert(color) {
    color = color.replace('rgb(', '');
    color = color.replace(')', '');
    color = color.replace('rgba(', '');
    let colors = color.split(',');
    let r = colors[0].replace(' ', '');
    let g = colors[1].replace(' ', '');
    let b = colors[2].replace(' ', '');
    let a = (colors.length > 3) ? colors[3].replace(' ', '') : 1;
    r = ~r & 255;
    g = ~g & 255;
    b = ~b & 255;
    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
  }
  selection = window.getSelection();
  if (selection.anchorNode) {
    const parent = selection.anchorNode.parentElement;
    const style = window.getComputedStyle(parent);
    parent.style.setProperty('--color', invert(style.color));
    parent.style.setProperty('--background-color', invert(style.backgroundColor));
  }
});

.invertSelectionColors::selection {
  color: var(--color);
  background-color: var(--background-color);
}

<div class="invertSelectionColors" style="background-color: cyan;color:#000000;">
  here is some text originally background color cyan and color #000000
</div>
<div class="invertSelectionColors" style="background-color: rgba(255, 0, 0, 0.5);color:#0000ffff;">
  here is some text originally background color rgba(255, 0, 0, 0.5) and color #0000ffff
</div>

score 1 · Answer 2 · answered Sep 19 '21 at 09:19

For now you simply can't do it by pure styling. You would have to write javascript code for that.

Only certain CSS properties can be used with ::selection:

color

background-color

text-decoration and its associated properties

text-shadow

stroke-color, fill-color and stroke-width

From moz documentation, but I guess it applies to all browsers.

score 0 · Answer 3 · edited Sep 18 '21 at 15:02

0

"Filters are commonly used to adjust the rendering of images, backgrounds, and borders." Filters are not used with ::selection.

You should use:

::selection {
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

<p>Lorem ipsum</p>

edited Sep 18 '21 at 15:02

Rifky Niyas

1,737
10
25

answered Sep 18 '21 at 14:55

Azu

1,494
2
6
11

1

I know that, but i need to invert colors. – Jurakin Sep 18 '21 at 14:58
1

Browsers invert colors automatically. – Azu Sep 18 '21 at 15:01
But if I have an another paragraph with other colors, it won't be inverted. – Jurakin Sep 18 '21 at 15:04
Could you please share a part of the code? – Azu Sep 18 '21 at 15:05

Invert colors inside selection

3 Answers3