[Edit]

HTML - how to disable text selection?

1 contributors

2 contributions

0 discussions

23 points

Created by:

Gigadude

791

In this article, we would like to show how by using HTML, JavaScript and CSS it is possible to disable text selection on any web site element.

Practical example

Edit

The below approach works under almost each one web browser. It blocks text and elements selection by using:

CSS class (disable-selection defined in example code)
unselectable="on" attribute (it is required by IE < 10 and Opera < 15)
onselectstart="return false" (it is additional solution for Internet Explorer web browsers family)

Notes:

some browsers still don't support user-select property (Can I use link here), so it is necessary to use prefixes for full capability.
in CSS3, user-select property is not part of the standard - it has working draft status for CSS4.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .disable-selection {
        -webkit-touch-callout: none; /* iOS Safari                         */
          -webkit-user-select: none; /* Safari                             */
           -khtml-user-select: none; /* Konqueror HTML                     */
             -moz-user-select: none; /* Firefox in the past (old versions) */
              -ms-user-select: none; /* Internet Explorer (>=10) / Edge    */
                  user-select: none; /* Currently supported:               */
                                     /* Chrome, Opera and Firefox          */
    }
​
    div {
        margin: 10px;
        padding: 20px;
    }
​
  </style>
</head>
<body>
  <div class="disable-selection" 
       style="background: silver" 
       unselectable="on"
       onselectstart="return false">
     This text is not selectable ...
  </div>
  <div style="background: gold">
     This text is selectable ...
  </div>
</body>
</html>