Home > Article > Web Front-end > In HTML, method to prevent image from being draggable or selectable without using JS

In HTML, method to prevent image from being draggable or selectable without using JS

PHPzforward: 2023-09-03 08:09:061267browse

Add the following code snippet to the image properties and prevent the image 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;
}

When you double-click the text or image, it will be highlighted (selected). User selection attributes can be used to prevent this. By setting this property to none we can prevent the image from being selected (highlighted).

Example

You can try running 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>

The above is the detailed content of In HTML, method to prevent image from being draggable or selectable without using JS. For more information, please follow other related articles on the PHP Chinese website!

html JS

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to create a pricing table using HTML and CSS?Next article：How to create a pricing table using HTML and CSS?

See more

In HTML, method to prevent image from being draggable or selectable without using JS

Example

Related articles