CSS Selector Level 4 » Drop pseudo-class

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...
explorermozillachromesafariopera info external