基于页面焦点的CSS高亮/选择颜色

时间:2013-08-19 17:17:06

标签: css select selector highlight

所以,这不是绝对的需要,但我很好奇,如果它存在,可能会在某些时候使用它......

我开发了一个网站(不是我的设计),其中某些文本区域有文本阴影,我注意到当所述文本突出显示时,它不是很清晰。我知道并使用::selection CSS选择器以及相应的浏览器前缀来删除高亮显示的文本阴影。

我的问题是,当文字保持选中且焦点从页面移除时,是否有任何可以覆盖突出显示默认值的内容?

示例:我执行select-all,默认情况下(Mozilla),所选文本获得蓝色背景。然后我说...开始搞乱Firebug,或者在我的浏览器上打开一个小窗口。所有亮点都变成灰色。我可以使用::selection属性(颜色,背景,文本阴影等)更改蓝色的行为,但灰色的行为保持不变。这样的事情存在吗?

2 个答案:

答案 0 :(得分:1)

是的,你可以使用带有:: selection

的选择器

例如,尝试使用类灰色

的特定段落
.gray p::-moz-selection { color: gold;  background: red; }
.gray p::selection      { color: gold;  background: red; } 

甚至是灰色等级的div

.gray div::-moz-selection { color: gold;  background: red; }
.gray div::selection      { color: gold;  background: red; } 

我不确定与此兼容,但它适用于FF,Chrome和IE9

答案 1 :(得分:1)

@feelinferrety答案为否。

您不能在离焦窗口上更改选择突出显示的颜色。至少截至目前(2019年1月)

这说明了如何使用::selection在聚焦窗口上执行此操作| ::-moz-selection
https://css-tricks.com/almanac/selectors/s/selection/

这显然表明:window-inactive | :-moz-window-inactive实际上可以工作,但是它们不能一起工作……因为它不是标准化的,因此没有开发
https://css-tricks.com/window-inactive-styling/

尽管有趣的是,例如,当窗口失去焦点时,您可以更改页面一半的背景颜色...