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
-
Economics & Finance
Preventing an image from being draggable or selectable in HTML without using JS
Images in HTML are draggable and selectable by default, which allows users to drag them to other locations or select them by double-clicking. You can prevent this behavior using CSS properties without requiring JavaScript.
CSS Properties for Preventing Image Interaction
The following CSS properties control image dragging and selection −
user-drag − Controls whether an element can be dragged by the user.
user-select − Controls whether the text of an element can be selected.
-webkit-user-drag − WebKit-based browsers (Chrome, Safari) specific property for drag control.
-webkit-user-select − WebKit-based browsers specific property for selection control.
-moz-user-select − Mozilla Firefox specific property for selection control.
-ms-user-select − Internet Explorer specific property for selection control.
Syntax
Following is the CSS syntax for preventing image dragging and selection −
img {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
Using CSS to Prevent Image Dragging and Selection
Example
Following example shows how to prevent images from being dragged or selected using CSS −
<!DOCTYPE html>
<html>
<head>
<title>Prevent Image Dragging and Selection</title>
<style>
.no-drag-select {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<h2>Protected Image (No Drag/Select)</h2>
<img src="https://www.tutorialspoint.com/images/python3.png"
alt="Python Logo"
class="no-drag-select"
width="62"
height="62">
<h2>Normal Image (Draggable/Selectable)</h2>
<img src="https://www.tutorialspoint.com/images/python3.png"
alt="Python Logo"
width="62"
height="62">
<p>Try to drag or double-click both images to see the difference.</p>
</body>
</html>
The first image cannot be dragged or selected, while the second image retains default behavior. Try dragging or double-clicking both images to observe the difference.
Applying to All Images
To apply these properties to all images on a webpage, use the universal image selector −
Example
<!DOCTYPE html>
<html>
<head>
<title>All Images Protected</title>
<style>
img {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<h2>All Images Are Protected</h2>
<img src="https://www.tutorialspoint.com/images/python3.png"
alt="Python Logo"
width="62"
height="62">
<img src="https://www.tutorialspoint.com/images/java.png"
alt="Java Logo"
width="62"
height="62">
<p>None of these images can be dragged or selected.</p>
</body>
</html>
With this CSS applied globally, all images on the page become non-draggable and non-selectable.
Understanding Each Property
Each CSS property serves a specific purpose for cross-browser compatibility −
user-drag: none − Standard property that prevents dragging in modern browsers.
user-select: none − Standard property that prevents text selection in modern browsers.
-webkit-user-drag: none − Specific to WebKit browsers (Chrome, Safari, Edge) for drag prevention.
-webkit-user-select: none − Specific to WebKit browsers for selection prevention.
-moz-user-select: none − Specific to Mozilla Firefox for selection prevention.
-ms-user-select: none − Specific to older Internet Explorer versions for selection prevention.
Alternative HTML Approach
You can also use the HTML draggable attribute to prevent dragging, though this does not prevent selection −
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML draggable Attribute</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
</style>
</head>
<body>
<h2>Using HTML draggable Attribute</h2>
<img src="https://www.tutorialspoint.com/images/python3.png"
alt="Python Logo"
draggable="false"
width="62"
height="62">
<p>This image cannot be dragged but can still be selected.</p>
</body>
</html>
The draggable="false" attribute prevents dragging but allows selection. For complete protection, combine it with CSS user-select properties.
Browser Compatibility
The CSS approach provides broad browser support −
Modern browsers − Support
user-draganduser-selectproperties.WebKit browsers − Chrome, Safari, and modern Edge support
-webkit-prefixed properties.Firefox − Supports
-moz-user-selectfor selection prevention.Legacy IE − Older versions support
-ms-user-select.
Conclusion
Use CSS properties like user-drag: none and user-select: none along with their vendor-prefixed versions to prevent image dragging and selection across all browsers. This approach requires no JavaScript and provides complete control over user interaction with images.
12K+ Views
