CSS3 ::selection behaves differently in FF & Chrome

Question

I\'m experimenting with the ::selection pseudo-element in CSS3. In Firefox it works and looks great. My site has a dark navy blue background.

I set the

Answer 1

As Steven Lu has pointed out in a comment to tw16's answer, the opacity treshold is 255/256.

                 

In other words, 0.996 will work but 0.997 will not.

Let's see it in action:

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

::-moz-selection
{
  background: #F80;
  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>

As you may see in Chrome, this obscures the images. To fix that, we need to apply specific styles to image selection, with a lower opacity:

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

In Firefox, there is no way to override the blue selection color on images, it seems.

Answer 2

For some reason Chrome forces it to be semi-transparent. However, you can get around this by setting the background using rgba. I have set the alpha value to be just 0.01 less than 1. Live example: http://jsfiddle.net/tw16/m8End/

p::-moz-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::-webkit-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}