CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxselection
Camilo Martin
Camilo Martin

Reputation: 37898

Firefox and Chrome insist on blue ::selection background

I cannot manage to make Chrome (41) and Firefox (36) apply a specific color to the entire selection background, some areas keep being blue, despite specifying orange background.

Consider the following example:

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

When pressing Ctrl+A, Chrome (and Opera) will look like this:

chrome or opera

Firefox will look like this:

firefox

Surprisingly, Internet Explorer (11) is the one that got it right:

internet explorer

Is there a way to make the entire selection either orange or white/transparent in the above example for Chrome and Firefox?

Upvotes: 3

Views: 176

Answers (1)

Camilo Martin
Camilo Martin

Reputation: 37898

The issue on Chrome and family (like little brother Opera, didn't check cousin Safari) is that ::selection does not apply to the implicit block wrapper created by adding a text node before a block element. This can be seen even without images:

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}
<p>Chrome loves you.</p>
Chrome hates you.
<p>Chrome is tsundere.</p>

The result looks like this on Chrome after a Ctrl+A:

tsundere Chrome

That's exactly what happened to those images. See this example:

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

After wrapping the imgs in a p like that, we have this on Chrome:

chrome

Firefox is still a mystery. I'd go with "impossible with CSS", if it weren't for the fact I've been baffled at the possibilites of CSS before (and browsers sometimes have stuff like -webkit-appearance which confound me). Failing that, it should be possible to do this with javascript, somehow. Colorizing an image, the hardest part, is possible with CSS filters.

Upvotes: 1

Related Questions