如何使用:: selection伪元素

Question

我正在使用:: selection伪类在文档中设置所选文本的样式。

div::selection {
  color: white;
  background-color: red;
}

span {
  color:white;
  background-color: red;
}

<div>Selected styled.</div>

Selected regular.

<span>Not Selected.</span>

当我选择样式化的文本时，红色明显不同于常规红色。它具有淡蓝色的覆盖层。这似乎是浏览器的默认选择样式与我自己的样式之间的某种相互作用。

如何在保留自己风格的同时完全删除浏览器样式？

我尝试使用html样式的user-select: none;，但这完全覆盖了所有选择。

编辑：我刚刚运行的是Firefox，它很好，所以这似乎是Chrome特有的问题。

编辑：以下是我在选择

时看到的屏幕截图

我正在Mac上使用Google Chrome版本74.0.3729.131。