问题
The ::selection { } CSS element selector is supposed to replace the default blue-colored text selection with our own choice of text and background color.
However, this seems not always the case, as I often see websites which has the remaining blue color. It's not completely replaced with our owh choice of color.
======EDIT======
I guess it's easier to see by our own eyes rather than through screenshot.
See this page for example: bleachindonesia.com/2012/05/27/bleach-day
On that page, if you try to select all (Ctrl+A), you would see the text will be blocked/selected with gray color. Yes, because the page CSS employs ::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }.
However, as you can see with the screenshot below, it leaves some default, blue-colored selection on some part.
http://i.stack.imgur.com/A0aUJ.png
Notice the color difference, and at the same time, the unselected part. There are some parts on the site that gets selected with the default blue-colored ::selection, but at the same time there are also some other parts that doesn't get selected.
Meanwhile, there is also this page: 24ways.org/2005/swooshy-curly-quotes-without-images
Again, try to select all (Ctrl+A) the page. You could see all selection is perfectly maroon-colored. There is no default blue-colored selection. There is only parts that doesn't get selected, but there is no the default blue-colored selection. As pictured by the screenshot below:
http://i.stack.imgur.com/4o6ll.png
The page CSS? ::selection { background-color: rgba(179, 45, 71, .75); color: #fff; }. The only difference with the first page that it uses RGBA and not hex code. I don't think it makes any difference there--it's essentially the same code.
Now what makes me wonder.
Why is on the first page the default blue-colored select persists, but it doesn't persist on the second page? And, how to make it as perfect as the second page?
回答1:
Frankly, it's very difficult to tell if this is buggy behavior, although I'd surmise that it looks very much like it. ::selection suffered from a lack of proper definition (and thus a lack of proper implementation and testing), so I bet even browser vendors have had trouble figuring out what's wrong.
Worth mentioning is that this rule, from the first site:
::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }
Seems very much benign, except it incorrectly combines ::selection and ::-moz-selection such that it will never work in Firefox, because it doesn't recognize ::selection and drops the whole rule. 24ways.org doesn't display the selection color properly in Firefox either, not because of combined selectors but because there is no ::-moz-selection selector in the first place.
As to why Chrome and Safari leave blue areas of highlight in certain areas in the first site, I really don't know. However, I think Jared Farrish makes a good point:
This replicates the problem in Chrome (at least): jsfiddle.net/RfPgt It seems to be when an element is nested within another element which itself has selectable elements.
回答2:
I found what is causing this. It is <br> so if you have <br> in your text try deleting it
回答3:
I read this question some time ago to find a solution for the same problem but I did not find it. Now, even if the question is old, I want to share the solution that I found.
Just use the universal selector:
*::selection { background:red; }
来源：https://stackoverflow.com/questions/12650767/the-remaining-blue-color-in-selection