How to disable text selection highlighting using CSS

By default, when you select some text in the browsers it is highlighted normally with the blue background color. There are two ways to disable this text selection highlighting using CSS.

Using ::selection pseudo-element.

This way you can still select the text and copy the text, but it won’t show that the text is selected.

::selection {
    color: none;
    background: none;
}

/* For Mozilla Firefox */
::-moz-selection {
    color: none;
    background: none;
}

/* Also you can target specific element */
h1::selection {
    color: none;
    background: none;
}

/* Customize the selection */
::selection {
    color: white;
    background: red;
}

Using user-select.

Currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).

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