问题描述
说我有一个input type="file"字段.可以将文件拖放到此input上(就像在Firefox中一样)，而不是单击浏览"并选择文件.
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.
现在，我想通过在要将文件拖放到input中时更改字段的背景颜色来对其进行一些自定义.我真的不能使用:hover，因为即使您不拖放也可以匹配它.是否有CSS(伪类)可以做到这一点?
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?
如果不接受删除的文件，是否存在CSS样式样式不同的方式?说，如果该字段仅接受使用accept属性的PNG文件，那么如果要在其上放置PNG文件，则将字段设置为绿色，如果这是另一种文件，则将字段设置为红色.
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.
今天有没有 CSS 方式?
推荐答案
更新:感谢@Renato的评论，根据 https://github.com/w3c/csswg-drafts/issues/2257 ，现在已删除drop伪类.
UPDATE: Thanks to @Renato's comment, according to https://github.com/w3c/csswg-drafts/issues/2257, the drop pseudo-class has been dropped now.
有:drop和:drop()伪类，当前位于工作草案状态.
There is :drop and :drop() pseudo-class, which is currently in Working Draft status.
根据 http://css4.rocks/选择器级别4/drag-and-drop-pseudo-class.php ，对浏览器的支持不好.
According to http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php, the browser support is not good.
对于不接受丢弃的文件"的情况，预计:drop(invalid active)将来会起作用.
For "file being dropped is not accepted" case, :drop(invalid active) is expected to work, in future.
这篇关于是否有CSS的“:drop-hover"?伪类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！