Languages
[Edit]
EN

CSS - how to disable text selection?

15 points
Created by:
AnnLen
1885

Using 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 with CSS. Read this article to prevent more cases.

Notes:

  • some browsers still does not support user-select property (Can I use link here), so it is necessary to use prefixes for full capability.
  • user-select proprty 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;">
     This text is not selectable ...
  </div>
  <div style="background: gold;">
     This text is selectable ...
  </div>
</body>
</html>

See also

  1. HTML - how to disable text selection?
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join