[Edit]

CSS - disable text selection

1 contributors

2 contributions

0 discussions

18 points

Created by:

Jan-Alfaro

681

Using CSS it is possible to remove text selection in the following way:

Quick solution:

xxxxxxxxxx
 
.element {
    -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          */
}

Notes:

some older browsers still does not support user-select property, so it is necessary to use prefixes for full capability (Can I use link here),
user-select property is part of CSS4 standard.

Practical example

Edit

This approach removes text selecting option from element with CSS. Read this article to prevent more cases.

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">
     This text is not selectable ...
  </div>
  <div style="background: gold">
     This text is selectable ...
  </div>
</body>
</html>