odedta odedta - 1 month ago 8
CSS Question

CSS ::selection not working in Google Chrome

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)

enter image description here

What's wrong: (Chrome)

enter image description here

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

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