This selector is deprecated now and is no longer considered to make it into the final CSS level draft. This page is kept temporary as archive reference.
The pseudo-class drop represents all elements that are drop targets. HTML has a dropzone attribute which specifies that an element is a drop target.
# Syntax
Copy
:drop {
/* declarations */
}
:drop(active) {
/* declarations */
}
:drop(valid) {
/* declarations */
}
:drop(invalid) {
/* declarations */
}
# Example
Copy
:drop {
background-color: blue;
}
:drop(active) {
background-color: yellow;
}
:drop(valid) {
background-color: green;
}
:drop(invalid) {
background-color: red;
}
In this example you could drop images (png, gif, jpeg) to the element with the text which has a blue background color if the browser supports this pseudo-class, the background color changes to yellow in its active state (user were to release the drag), green only matches if the drop target is valid for the currently dragged object and red if it's invalid.
Try example in CodePen# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
No
No
No
No
No
No
Mobile
No
No
No
No
No
No
Please wait a moment, the comments start loading now...