How to disable text selection highlighting in CSS

If you would like to disable the text selection highlighting that is enabled by default on all browsers, then you can do this:

user-select: none;
Code language: CSS (css)

If you are concerned about cross-browser support, then use this class:

.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ }
Code language: CSS (css)

You can then use it like this:

<p> Selectable text. </p> <p class="noselect"> Unselectable text. </p>
Code language: HTML, XML (xml)
Notify of
Inline Feedbacks
View all comments