CSS No Text Selection

by Bjorn Micallef

HTML

<div class="no-select">
  I cannot select this text
</div>
<br />
<div class="all-select">
  One click will select all of it
</div>
<br />
<div class="red-select">
  Join the dark side Luke
</div>
<br />
<div class="green-select">
  Powerful you have become, the dark side I sense in you.
</div>
<br />
<div class="blue-select">
  It's over Anakin, I have the high ground.
</div>

CSS

.no-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.all-select {
  -webkit-user-select: all;  
  -moz-user-select: all;    
  -ms-user-select: all;      
  user-select: all;
}

div.red-select::selection {
  background: #ffb7b7;
}
div.red-select::-moz-selection {
  background: #ffb7b7;
}

div.green-select::selection {
  background: #00e600;
}
div.green-select::-moz-selection {
  background: #00e600;
}

div.blue-select::selection {
  background: #80ccff;
}
div.blue-select::-moz-selection {
  background: #80ccff;
}