Languages
[Edit]
EN

HTML - how to disable text selection?

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

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.
// 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>

 

See also

  1. CSS - disable text selection

Alternative titles

  1. HTML - block text selection
  2. HTML - disable text selection
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

HTML

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join