Search code examples
cssselectionopacity

How to change the opacity of the selected text?

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.

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.