8

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.

Notice the blue color among the gray here.

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

Perfectly colored

https://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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
deathlock
  • 2,756
  • 5
  • 27
  • 48
  • I don't get it, what's supposed to be selected in that image? – xception Sep 29 '12 at 07:22
  • Please provide a link to your page, and post the relevant CSS here. – Chris Sep 29 '12 at 07:32
  • @xception: sorry for the confusing explanation, I've edited the post. Perhaps it's easier if you see the website itself and Ctrl+A. Please wait, I'll be providing the links – deathlock Sep 29 '12 at 07:35
  • @Abody97: since my site is still on localhost, I'd give example on here > http://bleachindonesia.com/2012/05/27/bleach-day/ < on this site, if you Ctrl+A, you could see some default blue color among the custom black-colored selection. Meanwhile, if you see here > http://24ways.org/2005/swooshy-curly-quotes-without-images < you could see all selection is maroon-colored (customized), except in some parts (colored green, which is intended). There is no blue color left, and it's perfectly colored as maroon. – deathlock Sep 29 '12 at 07:38
  • You mention that you're "doing something", but yet we don't see what it is you've done. Please include the relevant CSS in your question and a minimal demo on http://jsfiddle.net. – Jared Farrish Sep 29 '12 at 07:45
  • 1
    @JaredFarrish It's not a problem I'm having while I'm creating a website. It's a behavior I've been noticing in various websites. So I'm afraid I can't give a demo (since that would mean I have to copy two entire different websites). However, I have tried to re-outline what I want to ask by editing my question. Please do re-check and visit those two sites I have linked above. :) – deathlock Sep 29 '12 at 09:28
  • Oh, I see. There's two differences I notice: the 24 Ways site is using `media="screen"` and the other isn't, and the selection text that's blue seems to be where there's a `margin` set. I don't know if that starts to get to the root of the problem, but that's the first things I notice. – Jared Farrish Sep 29 '12 at 10:00
  • 1
    This replicates the problem in Chrome (at least): http://jsfiddle.net/RfPgt/ It seems to be when an element is nested within another element which itself has selectable elements. – Jared Farrish Sep 29 '12 at 10:06
  • 1
    @Jared: It's seen in Safari as well. – BoltClock Sep 29 '12 at 11:14
  • @JaredFarrish defining where things float (left or right) fixes this. It's a hard one to go back and add to CSS without having to remake the whole page, but something to bear in mind. http://jsfiddle.net/RfPgt/20 – owhs Feb 27 '15 at 16:18

3 Answers3

5

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Here's a couple of more situations where it fails (as well as doesn't, like a `div` with `style="display: inline"`): http://jsfiddle.net/RfPgt/2/ – Jared Farrish Sep 29 '12 at 11:48
  • 1
    Great answer. I also found that having an img set as "display:block" wrapped inside of an "" tag would cause issues. As soon as I did "display: inline-block;" the problem was solved – bitwit Feb 03 '13 at 06:18
  • actually, you should not comma seperate them because of the dropping of both rules when it finds one invalid. you must do `::selection{background:black}` and `::-moz-selection{background:black}` in two different sets – dansch Jun 27 '13 at 14:48
  • It appears to be a bug, see answer to this question which gives a link to the webkit bug ID: http://stackoverflow.com/questions/8866866/why-does-the-css3-pseudo-selection-not-change-the-color-for-all-parts – Jon Oct 31 '14 at 15:10
  • As I put in the answer above; defining where things float (left or right) fixes this. It's a hard one to go back and add to CSS without having to remake the whole page, but something to bear in mind. http://jsfiddle.net/RfPgt/20 – owhs Feb 27 '15 at 16:19
1

I found what is causing this. It is <br> so if you have <br> in your text try deleting it

shabany
  • 799
  • 8
  • 13
-1

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; }
koMah
  • 429
  • 5
  • 18