Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Saying I have an input type="file" field. One can drop a file on this input(like in Firefox) instead of clicking "browse" and selecting the file.

Now, I want to customize it a bit, by changing the field's background color when one is about to drop a file in the input. I cannot really use :hover since it matches even when you're not drag&dropping. Is there a CSS (pseudo-class) to do that?

And is there a CSS way to style different if the file being dropped is not accepted and if it is? Say, if the field accepts only PNG files using accept attributes, I would make the field green if you're about to drop a PNG file on it, and red if that's another type of file.

Is there a CSS way to do these today? Is there a planned way to do so in CSS (like in upcoming specs/in current specs but not implements anywhere)?

like image 626
Xenos Avatar asked Mar 17 '17 09:03

Xenos


People also ask

Is hover a pseudo-element in CSS?

The :hover is pseudo-class and :before & :after are pseudo-elements. In CSS, pseudo-elements are written after pseudo-class. In CSS3 double colon(::) is used to denote pseudo-element. For IE8 or older use a single colon (CSS2 syntax) is used.

Is hover a pseudo-class?

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Does CSS have a pseudo-class?

The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.

Is Target a pseudo-class?

The :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.


1 Answers

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


There is :drop and :drop() pseudo-class, which is currently in Working Draft status.

According to [moderator: link to spam removed], the browser support is not good.

For "file being dropped is not accepted" case, :drop(invalid active) is expected to work, in future.

like image 116
shaochuancs Avatar answered Sep 21 '22 12:09

shaochuancs