How to change the opacity of the selected text?

css, opacity, selection

Solution

You won't be able to use the `opacity` property with `::selection`. It was never one of the allowed properties, and even if it were implemented, it wouldn't make sense as you're not modifying the opacity of the element itself anyway.

You can use `rgba()` colors with the text and background rather than `opacity` on the entire element instead. It's not the ideal workaround, but it works at least for colors:

body {
  color: rgba(0, 0, 0, 0.1);
}

::-moz-selection {
  color: rgba(0, 0, 0, 1);
}

::selection {
  color: rgba(0, 0, 0, 1);
}

<p>Almost invisible text that turns opaque on selection.

Problem

I have almost invisible text on the webpage with `opacity: 0.1;` I want it to become visible when selected. However, the selection is also almost invisible. Unfortunately, `::selection` doesn't change the opacity.

Original source