Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
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: 2020-06-01T10:44:14+05:30
12K+ Views
Advertisements