CSS – How to disable text selection highlighting

How to disable text selection highlighting

A standard-compliant way to accomplish this with CSS
.noselect {
cursor:default; -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, Opera and Firefox */ }
<p>
  Selectable text.
</p>
<p>
  Unselectable text.
</p>
For IE9 and lesser versions, please add 
<div onselectstart="return false;"> 
to main div. 

If you want to disable text selection on everything except on <p> elements, you can do this in CSS (watch out for the -moz-none which allows override in sub-elements, which is allowed in other browsers with none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}
p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

If you also want to make input fields selectable with <p> elements: 

p,input {

-webkit-user-select: text;

-khtml-user-select: text;

-moz-user-select: text;

-o-user-select: text;

user-select: text;


}


Posted

by

Comments

One response to “CSS – How to disable text selection highlighting”

  1. A WordPress Commenter Avatar

    Hi, this is a comment.
    To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
    Commenter avatars come from Gravatar.

Leave a Reply

Your email address will not be published. Required fields are marked *