Disabling Text Selection, Forcing Text Highlighting with CSS

This tutorial will show you how to disable the selection of text and force the highlighting of text with the use of CSS.

Disable Text Selection

1. Insert the following code into your CSS file.

.no-select {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}

2. Give your text the class .no-select.

3. Example result:

I am a brave and strong paragraph. The CSS class .no-select empowers me. You cannot select me! Try highlighting me, if you can!

Force Text Highlighting

1, Insert the following code into your CSS file.

.multi-select {
    -webkit-touch-callout:all;
    -webkit-user-select:all;
    -khtml-user-select:all;
    -moz-user-select:all;
    -ms-user-select:all;
    -o-user-select:all;
    user-select:all;
}

2. Give your text the class .multi-select.

3. Example result:

I am a brave and strong paragraph. The CSS class .multi-select empowers me. I volunteer myself to be selected. Try clicking on me!