【问题标题】:How to change the browser persistant blue select all highlight color?如何更改浏览器持久蓝色选择所有突出显示颜色?
【发布时间】:2012-11-29 07:28:51
【问题描述】:

我知道如何更改突出显示的文本颜色,但我无法在我的网站上更改持久的蓝色突出显示。

这是我的例子http://i.imgur.com/d4HkP.png的截图

要查看示例,请访问下面的 jsfiddle,然后使用 command + a 或 ctrl + a 突出显示所有文本...

此处的蓝色填充或边距是否突出显示? 另外,我注意到我可以通过将 [br] 标签放在 [p] 标签之外的 dom 中来创建更多它

对此有什么想法吗?

编辑:

我创建了一个小提琴来解决这个问题并更好地说明它:

::selection doesn't work

http://jsfiddle.net/designaroni/UTd3E/

突出显示正在运行的内容,您会看到蓝色,这是这里的罪魁祸首。

这里还有什么建议吗?

【问题讨论】:

  • 我不确定,但我认为目前无法覆盖某些元素、输入等中的突出显示。

标签: css xcode highlight frontend


【解决方案1】:

无法更改浏览器突出显示您网站的方式。这个问题是特定于浏览器的,因为不同的浏览器以不同的方式突出显示。但是,您可以通过 CSS 设置网站的哪些部分可以通过用户选择属性突出显示或不能突出显示。

编辑: 我以为您知道如何更改选择的颜色,但现在我明白您的意思是突出显示文本的颜色。下面的答案可能涵盖了这一点;)

【讨论】:

  • 突出显示背景或文本的颜色也不是问题,请参阅这个示例,我将文本放在一起并突出显示,在这种情况下,蓝色是有问题的颜色。 jsfiddle.net/designaroni/UTd3E
【解决方案2】:

您可以自定义::selection 伪元素。见documentation from Mozilla

根据文档中的示例,您可以从文档中自定义选择颜色,如下所示:

/* draw any selected text yellow on red background */
#myelem::-moz-selection { color: gold;  background: red; }  /* For Firefox */
#myelem::selection      { color: gold;  background: red; }  /* Other ::selection-compatible browsers */

要将其应用于页面上的所有可选元素:

*::-moz-selection { color: gold;  background: red; }  /* For Firefox */
*::selection      { color: gold;  background: red; }  /* Other ::selection-compatible browsers */

请注意,这是一个伪元素,并且没有标准化,因此它的行为是由实现定义的。

【讨论】:

  • 我已经做到了,但它并没有针对我想要的目标...查看此示例并突出显示文本,蓝色是我所说的突出显示jsfiddle.net/designaroni/UTd3E的违规罪魁祸首/跨度>
猜你喜欢
  • 2013-05-17
  • 2011-02-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-30
  • 2012-02-09
  • 2019-07-06
  • 2014-07-17
相关资源
最近更新 更多