Languages
[Edit]
EN

HTML - how to disable text selection?

17 points
Created by:
JustMike
3497

Using HTML, JavaScript and CSS it is possible to remove text selection in following way.

1. Custom back compatible example

This approach removes text selecting (and not only) option from element by adding:

  • specific class (.disable-selection defined in example code)
  • unselectable="on" attribute - required by IE < 10 and Opera < 15
  • onselectstart="return false;" - alternative solution for Internet Explorer

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.
  •  user-select property is not part of standard - it has working draft status for CSS4.
// ONLINE-RUNNER:browser;

<!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>

 

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.