css - 在选择时更改边框颜色

Question

我正在尝试使用 ::selection 和 ::-moz-selection 伪元素修改默认选择样式。我已经使用以下两条规则成功更改了选择颜色和背景:

::-moz-selection{ background: #444; color:#fff; text-shadow: none; }
::selection { background:#444; color:#fff; text-shadow: none; } 

但是，我还需要在选择链接时将 border-color 更改为白色。我试图用这个 CSS 来完成这个:

a::-moz-selection { border-color:#FFF;}
a::selection {border-color:#FFF; }

即使我添加了 !important 覆盖，Safari 也不会设置边框颜色的样式。

我错过了什么？为什么我不能在选择时更改链接的 border-color？

Answer 1

您不能为文本选择定义 border 样式。

尝试定义一个 outline(它将成为 old spec 和 SitePoint Reference 中规定的允许属性之一):

a::-moz-selection { outline: 1px solid #fff; }
a::selection { outline: 1px solid #fff; }

如果这不起作用，恐怕浏览器不支持 ::selection 上的轮廓。

记住 ::selection has been move out of the Selectors spec ，其余的 CSS 级别 3 仍处于草案阶段，因此您还不能指望浏览器正确/完全实现它。