CSS Selector Level 4 » Drop pseudo-class

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

Usage statistics (Alexa Top 1,250,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera