CODEWITHSUNDEEP
csshtml
odedta
odedta

Reputation: 2478

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>

Upvotes: 7

Views: 8532

Answers (5)

Fredrik Johansson
Fredrik Johansson

Reputation: 95

For me it seemed like ::-moz-selection was the issue.

When removing it the selection appeared as I wanted in Chrome.

Upvotes: 0

DONTEATTHEPIE
DONTEATTHEPIE

Reputation: 1

If anyone is still having this issue, check to see you don't have any unspecified :first-letter

Upvotes: 0

Josh
Josh

Reputation: 11

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

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

Upvotes: 1

Muhammet
Muhammet

Reputation: 3308

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

Upvotes: 7

Sreelal P Mohan
Sreelal P Mohan

Reputation: 313

You should add ::-webkit-selection

Upvotes: 1

Related Questions