Disable text selection

Disable text selection

by Arunkumar Gudelli

HTML

<h3>user-select:none</h3>
<div class="text-selection-none">
text selection is disabled 
<div>Text selection is disabled in children element also</div>
</div>

<h3>user-select:text</h3>
<div class="text-selection-none">
text selection is disabled
<div class="text-selection-text">You can select me</div>
<div> text selection is disabled</div>
</div>

<h3>user-select:all</h3>
<div class="text-selection-all">
  On click we can select the text
</div>

<h3>user-select:auto</h3>
<div class="text-selection-none">
text selection is disabled
<div class="text-selection-auto">as parent element is none cannot select text</div>
<div> text selection is disabled</div>
<br/>

<div class="text-selection-text">
text selection is enabled
<div class="text-selection-auto">as parent element is text,can select text</div>
<div> text selection is enabled</div>

<br/>

<div class="before text-selection-auto">as parent element is text,can select text<br/></div>

<h3>
user-select:contain
</h3>

<div class="text-selection-containt">as parent element is text,can select text<br/></div>

CSS

.text-selection-none{
   user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none;
}
.text-selection-text{
   user-select: text; /* supported by Chrome and Opera */
   -webkit-user-select: text; /* Safari */
   -khtml-user-select: text; /* Konqueror HTML */
   -moz-user-select: text; /* Firefox */
   -ms-user-select: text;
}
.text-selection-all{
   user-select: all; /* supported by Chrome and Opera */
   -webkit-user-select: all; /* Safari */
   -khtml-user-select: all; /* Konqueror HTML */
   -moz-user-select: all; /* Firefox */
   -ms-user-select: all;
}
.text-selection-auto{
   user-select: auto; /* supported by Chrome and Opera */
   -webkit-user-select: auto; /* Safari */
   -khtml-user-select: auto; /* Konqueror HTML */
   -moz-user-select: auto; /* Firefox */
   -ms-user-select: auto;
}
div.before::after {
  content: "hi";
}