Firefox 和 Chrome 坚持蓝色 ::selection 背景答案

【问题标题】：Firefox and Chrome insist on blue ::selection backgroundFirefox 和 Chrome 坚持蓝色 ::selection 背景
【发布时间】：2015-04-03 18:57:27
【问题描述】：

我无法让 Chrome (41) 和 Firefox (36) 将特定颜色应用于整个选择背景，尽管指定了橙色背景，但某些区域仍然是蓝色。

考虑以下示例：

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

::-moz-selection
{
  background: #F80;
  color: white;
}

img::selection
{
  background: rgba(255, 127, 0, 0.8);
  color: white;
}

<p>The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. They are often called a housecat when kept as an indoor pet, or simply a cat when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship.</p>
    <img src="http://placekitten.com/g/75/300">
    <img src="http://placekitten.com/g/300/300">
    <img src="http://placekitten.com/g/150/300">
<p>A Melvin, Michigan woman was brutally attacked by a stray cat and shocking footage of the mauling has already gained a million views on YouTube.</p>
<p>The woman, who identified herself to reporters only as Maxx, endured the horrific attack November 30 but only recently realized it had been caught on her home surveillance camera.</p>
<p>The attack left her face swollen and infected and the cat named Buddy dead as officials were forced to test it for rabies.</p>

当按下 Ctrl+A 时，Chrome（和 Opera）将如下所示：

Firefox 将如下所示：

令人惊讶的是，Internet Explorer (11) 是正确的：

在上面的 Chrome 和 Firefox 示例中，有没有办法让整个选择变成橙色或白色/透明？

【问题讨论】：

标签： html css google-chrome firefox selection

【解决方案1】：

Chrome 及其家族（就像小弟 Opera，没有检查表亲 Safari）的问题是 ::selection 不适用于通过在块元素之前添加文本节点创建的隐式块包装器。即使没有图像也可以看到这一点：

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

<p>Chrome loves you.</p>
Chrome hates you.
<p>Chrome is tsundere.</p>

在 Chrome 上按 Ctrl+A 后的结果如下所示：

这正是这些图像所发生的事情。看这个例子：

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

::-moz-selection
{
  background: #F80;
  color: white;
}

img::selection
{
  background: rgba(255, 127, 0, 0.8);
  color: white;
}

<p>The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. They are often called a housecat when kept as an indoor pet, or simply a cat when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship.</p>
<p>
    <img src="http://placekitten.com/g/75/300">
    <img src="http://placekitten.com/g/300/300">
    <img src="http://placekitten.com/g/150/300">
</p>
<p>A Melvin, Michigan woman was brutally attacked by a stray cat and shocking footage of the mauling has already gained a million views on YouTube.</p>
<p>The woman, who identified herself to reporters only as Maxx, endured the horrific attack November 30 but only recently realized it had been caught on her home surveillance camera.</p>
<p>The attack left her face swollen and infected and the cat named Buddy dead as officials were forced to test it for rabies.</p>

像这样将imgs 包裹在p 中之后，我们在 Chrome 上就有了这个：

Firefox 仍然是个谜。如果不是因为我之前对 CSS 的可能性感到困惑，我会选择“不可能使用 CSS”（而且浏览器有时会有 -webkit-appearance 这样的东西让我感到困惑）。如果做不到这一点，应该可以用 javascript 以某种方式做到这一点。使用 CSS filters 可以为图像着色，这是最难的部分。

【讨论】：