Languages
[Edit]
EN

CSS - disable text selection

18 points
Created by:
Jan-Alfaro
681

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

Quick solution:

.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

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

    // 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?
    2. CSS - disable elements dragging

    Alternative titles

    1. CSS - block text selection
    2. CSS - how to disable text selection?
    3. CSS - disable text selection highlighting
    4. Pure CSS - 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.

    CSS

    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