【问题标题】:Changing border-color on selection在选择时更改边框颜色
【发布时间】:2011-06-20 00:07:10
【问题描述】:

我正在尝试使用::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

【问题讨论】:

  • 你的意思是焦点还是活动而不是选择?
  • 不,我绝对是指选择。

标签: css webkit mozilla pseudo-element


【解决方案1】:

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

尝试定义一个outline 代替(它将成为old specSitePoint 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 的其余部分仍处于草稿阶段,因此您还不能依赖浏览器正确/完整地实现它。

【讨论】:

  • 你有这个来源吗?
  • @daysrunaway:大约十年前,当 CSS3 处于非常非常早期的草稿阶段,::selection 仍处于定义中时,this document 并没有将边框声明为您可以使用的属性之一.不过,今天实施 UA 仍然遵循相同的规则。
  • 谢谢。我想我必须改用text-decoration:underline;
  • @daysrunaway:其实,看看你能不能定义一个大纲来代替(用我的编辑)。
猜你喜欢
  • 2012-06-26
  • 2023-03-06
  • 1970-01-01
  • 2017-03-06
  • 1970-01-01
  • 2012-06-25
  • 1970-01-01
  • 2016-03-29
  • 1970-01-01
相关资源
最近更新 更多