Is there a CSS class pseudo-class: drop-hover?

Question

Saying that I have an input type="file" field. You can delete the file on this input (for example, in Firefox), rather than clicking “view” and select the file.

Now I want to tweak it a bit by changing the background color of the field when you are about to delete the file in input . I cannot use :hover , as it matches even when you are not dragging and dropping. Is there any CSS (pseudo-class) for this?

And is there a CSS way for the style to be different if the file that was dumped is not accepted, and if so? Say, if a field accepts only PNG files using accept attributes, I would make the field green if you are going to delete the PNG file on it, and red if it is a different type of file.

Is there a CSS way to do this today? Is there a planned way to do this in CSS (e.g. in future specs / in current specs, but not anywhere)?

Answer 1

UPDATE: Thanks to @Renato's comment, according to https://github.com/w3c/csswg-drafts/issues/2257 , the drop pseudo-class is now excluded.

---

There is a pseudo-class :drop and :drop() , which is currently in working condition.

According to http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php , browser support is not very good.

For the case "file deletion is not accepted", it is expected that in the future it will work :drop(invalid active) .

Answer 2

I had the same question and he decided a little differently than he did. However, using JavaScript, (I used jQuery to simplify):

 function drag(ev) { ev.dataTransfer.setData("text", "foo"); } function allowDrop(ev) { $(ev.target).attr("drop-active", true); ev.preventDefault(); } function leaveDropZone(ev) { $(ev.target).removeAttr("drop-active"); } function drop(ev) { ev.preventDefault(); $(ev.target).removeAttr("drop-active"); alert(ev.dataTransfer.getData("text")); } 

 #draggableItem { height: 50px; width: 150px; background-color: #eee; } #dropZone { height: 50px; width: 150px; background-color: #efe; } #dropZone[drop-active=true] { box-shadow: inset 0px 0px 0px 2px #00C; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="draggableItem" draggable="true" ondragstart="drag(event);">Drag Me</div> <div id="dropZone" ondragover="allowDrop(event);" ondragleave="leaveDropZone(event);" ondrop="drop(event);">Drop Here</div> 

I tested this in Safari, Firefox, and Chrome, but I have not tried IE. I probably break the rule with a custom attribute, but it works while I wait for CSS4.

Answer 3

There is currently no completely pure cross-browser css solution for changing item properties when dragging items into a browser window.

What you are trying to do here can be achieved using Javascript / jQuery, using a hidden container and showing it only when the object is inside the container with drag and drop.

This is the demo that I saved earlier if you want to watch:

 var resetTimer; var reset = function() { $('#d1').hide(); }; var f = function(e) { var srcElement = e.srcElement ? e.srcElement : e.target; if ($.inArray('Files', e.dataTransfer.types) > -1) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none'; if (e.type == "dragover") { if (resetTimer) { clearTimeout(resetTimer); } $('#d1').show(); console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0)); } else if (e.type == "dragleave") { resetTimer = window.setTimeout(reset, 25); } else if (e.type == "drop") { reset(); alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0)); } } }; document.body.addEventListener("dragleave", f, false); document.body.addEventListener("dragover", f, false); document.body.addEventListener("drop", f, false); 

 body { border: 1px solid black; } #d0, #d2 { border: 1px solid black; } #d1 { border: 1px solid black; display: none; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="d0">drag files onto this page</div> <div id="d1">-&gt; drop here &lt;-</div> <div id="d2">and stuff will happen</div> </body>