Two browsers showing two different text highlight colours

user_15675913 0
Viewed 128

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?

css html
1 Answers

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%);
}
user_160912220
Related