Teach with us

Preventing an image from being draggable or selectable in HTML without using JS

Add the following code snippet to image properties, and prevent images from being dragged and selected.

img {  
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

On double click on a text or image, it is highlighted (selected). The user select property can be used to prevent this. By setting this property to none, we can prevent our image from being selected (highlighted).

Example

You can try to run the following code to prevent the image from being selected −

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            -drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/images/python3.png" alt = "Python" width = "62" height = "62">
   </body>
</html>
Updated on 01-Jun-2020 10:44:14

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements