DEV Community

Richmond
Richmond

Posted on

Mobile Touch Hover Event & Disable Text Selection, Copy, Cut, Paste

No matter what is the reason for disabling user-selection on your app, if you have come to that step, this is the right place to learn how to that with CSS

<!DOCTYPE html>
  <html>
    <head>
      <title>Title of the document</title>
      <style> 
        .not-user-selectable { 
          -webkit-user-select: none; 
          -webkit-touch-callout: none; 
          -moz-user-select: none; 
          -ms-user-select: none; 
          user-select: none;    
          color: #cc0000;
        } 
      </style>
    </head>
    <body>
      <p>I am a selectable text. You can select me.</p>
      <div class="not-user-selectable">I am an unselectable text. My 
      text selection is disabled.</div>
    </body>
</html>

For handling pressed state in mobile, we can use :hover css selector. When you try to use in mobile UI the :hover will negate desktop functionality and use the tap behavoir.

&:hover {
    background: green;
}

Latest comments (0)