我无法使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,有没有一种方法可以使整个选择变成橙色或白色/透明的?
最佳答案
chrome和family上的问题(如little brother opera,没有检查cousin 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
s包装成这样的p
后,我们在chrome上有了这个:火狐仍然是个谜。如果不是因为我以前对css的可能性感到困惑,我会选择“不可能使用css”(浏览器有时会有一些让我困惑的东西)。如果失败了,就应该可以用javascript来实现。使用css
-webkit-appearance
s可以使图像着色,这是最困难的部分。关于html - Firefox和Chrome坚持使用蓝色:: selection背景,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29438095/