3

I'm just customising parts of my website and decided to change the highlighting colour. In Brave Browser (Chromium based) the colour was viewed as intended but I then checked on Safari where the colour looks different.
This is the code snippet in my CSS:

::selection {
    color: black;
    background-color: #aaaaff;
}
::-moz-selection {
    color: black;
    background-color: #aaaaff;
}

Pictures are provided detailing the differences.
Brave Browser (correct)

Brave Browser (correct)
Safari

Safari

Does anybody know why this is happening and how to fix it so the highlight colour appears the same on all browsers?

j08691
  • 204,283
  • 31
  • 260
  • 272
TerminalFlow
  • 230
  • 2
  • 11
  • 1
    I believe to make selection colors work consistently in all browsers you need to use a slight opacity to your color. Something like `rgba(100, 100, 255, 0.9)` – Dominik May 31 '21 at 22:04
  • 1
    Ironically, Chromium used to have this issue [10 years ago](https://stackoverflow.com/questions/7224445/css3-selection-behaves-differently-in-ff-chrome) - but that was before the Blink fork happened. Not saying that is the reason why, though. But surprised to see this in Safari considering ::selection's behavior is now well-defined in css-pseudo-4. My guess is Safari is incorrectly applying this effect to highlighted text when the spec says it should only apply to highlighted replaced elements (such as images). – BoltClock Jun 01 '21 at 05:39
  • 2
    @Dominik: Yeah, 0.99 works as well. See the question I just linked to. – BoltClock Jun 01 '21 at 05:40
  • Thanks everyone for their answers. @BoltClock Is this solution (to define an opacity < 1) used as standard or is my situation a unique occurrence and usually not needed? – TerminalFlow Jun 01 '21 at 12:36

1 Answers1

2

To work in Safari Browser, you need to add a slight opacity. Instead of hex code, you can add rgba or hsla. It works fine, i checked it in Safari! It doesn't work if you set opacity 100%, but it works fine with 99%.

RGBA Colors:

::selection {
  color: black;  
  background-color: rgb(168 168 255 / 99%);
}
::-moz-selection {
  color: black;  
  background-color: rgb(168 168 255 / 99%);
}

HSLA Colors:

::selection {
  color: black;
  background-color: hsl(240deg 100% 83% / 99%);
}
::-moz-selection {
  color: black;
  background-color: hsl(240deg 100% 83% / 99%);
}
koirj
  • 71
  • 1