CSS ::selection not working in Google Chrome

Question

I have this code which works fine in internet explorer and Mozilla Firefox but it fails on Google Chrome, this is the basic CSS ::selection selector. Attached is an illustration of the problem:

Desired result: (IE, Firefox)

What's wrong: (Chrome)

This only happens in Google Chrome, I am attaching the code I've tried here:

::-moz-selection {
  background-color: orange;
  color: white;
}
::selection  {
  background-color: orange;
  color: white;
}
::-webkit-selection {
  background-color: orange;
  color: white;
}

<ol>
  <li>Hello World!</li>
  <li>What's up?</li>
</ol>

Answer 1

::-webkit-selection doesn't seem to fix the issue, but there is another workaround for it:

::-moz-selection {
  background-color: orange;
  color: white;
}
::selection {
  background-color: orange;
  color: white;
}
ol {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
ol span {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
}

<ol>
  <li><span>Hello World!</span></li>
  <li><span>What's up?</span></li>
</ol>

Answer 2

You should add ::-webkit-selection

Answer 3

Still wasn't working but this worked for me...

    * {
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text; 
    }