Clever Geek Handbook

CSS :: selection doesn't work in google chrome

I have this code that works fine in Internet Explorer and Mozilla Firefox, but it doesn't work in Google Chrome, it is the main CSS selector ::selection

. An example of the problem is attached:

Desired Output: (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 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 up?</li>
</ol>
Run code


+3


source to share


3 answers


::-webkit-selection

doesn't seem to fix the problem, but there is another way:



::-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 up?</span></li>
</ol>
Run code


+4


source


You must add ::-webkit-selection



+1


source


Still didn't work, but it worked for me ...

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


source






More articles:


All Articles