Firefox和Chrome强制使用蓝色::selection背景

Question

我无法让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示例中，有没有一种方法可以使整个选择区域变成橙色或白色/透明？

- Camilo Martin

Answer 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>

在这样将 img 包裹在 p 中后，我们在 Chrome 上得到如下结果：

火狐浏览器仍然是一个谜。如果不是因为我之前被 CSS 的可能性搞糊涂过（而且浏览器有时会有像 -webkit-appearance 这样的东西让我困惑），我会说这是“不可能用 CSS 实现的”。如果不行，应该可以用 JavaScript 来实现。对于图像着色这个最难的部分，可以通过 CSS 的 filter 实现。

- Camilo Martin