title: The remaining blue color in ::selection?
body: <p>The <code>::selection { }</code> CSS element selector is supposed to replace the default blue-colored text selection with our own choice of text and background color.</p>
  
  <p>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.</p>
  
  <p><strong>======EDIT======</strong></p>
  
  <p>I guess it's easier to see by our own eyes rather than through screenshot. </p>
  
  <p>See this page for example: <a href="http://bleachindonesia.com/2012/05/27/bleach-day" rel="noreferrer">bleachindonesia.com/2012/05/27/bleach-day</a></p>
  
  <p>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 <code>::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }</code>.</p>
  
  <p>However, as you can see with the screenshot below, it leaves some default, blue-colored selection on some part.</p>
  
  <p><img src="https://i.stack.imgur.com/A0aUJ.png" alt="Notice the blue color among the gray here."></p>
  
  <p><a href="https://i.stack.imgur.com/A0aUJ.png" rel="noreferrer">http://i.stack.imgur.com/A0aUJ.png</a></p>
  
  <p>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. </p>
  
  <hr>
  
  <p>Meanwhile, there is also this page: <a href="http://24ways.org/2005/swooshy-curly-quotes-without-images" rel="noreferrer">24ways.org/2005/swooshy-curly-quotes-without-images</a></p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/4o6ll.png" alt="Perfectly colored"></p>
  
  <p><a href="https://i.stack.imgur.com/4o6ll.png" rel="noreferrer">http://i.stack.imgur.com/4o6ll.png</a></p>
  
  <p>The page CSS? <code>::selection { background-color: rgba(179, 45, 71, .75); color: #fff; }</code>. 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.</p>
  
  <p>Now what makes me wonder.</p>
  
  <p>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?</p>