DEV Community


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>
      <title>Title of the document</title>
        .not-user-selectable { 
          -webkit-user-select: none; 
          -webkit-touch-callout: none; 
          -moz-user-select: none; 
          -ms-user-select: none; 
          user-select: none;    
          color: #cc0000;
      <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>

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;

Top comments (0)