Xen*_*nos 24 html css css-selectors pseudo-class
说我有一个input type="file"领域.可以input在此处删除文件(如在Firefox中),而不是单击"浏览"并选择文件.
现在,我想通过更改字段的背景颜色来定制它,当一个文件将要删除时input.我不能真正使用,:hover因为即使你没有拖放也匹配.有没有CSS(伪类)呢？
如果不接受丢弃的文件,是否有一种CSS方式来设置不同的样式？比方说,如果该字段仅接受使用accept属性的PNG文件,如果您要将PNG文件放在其上,我会将该字段设为绿色,如果是另一种类型的文件则为红色.
今天有没有CSS方法可以做到这些？有没有一种计划的方法在CSS中这样做(比如即将出现的规格/当前规格,但没有在任何地方实现)？
sha*_*ncs 12
有:drop和:drop()伪类,目前处于工作草案状态.
根据http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php,浏览器支持不好.
对于"不接受文件被丢弃"的情况,:drop(invalid active)预计将来可以使用.
我有同样的问题,并解决它与nashcheez有点不同.尽管如此(我在这里使用jQuery简化了一些事情):
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>我已经在Safari,Firefox和Chrome上测试了这个,但我没有尝试过IE.我可能正在使用自定义属性打破规则,但它似乎在我等待CSS4时工作.
小智 7
没有 CSS 解决方案。我的问题是在拖动时更改颜色（Chrome 不支持，Opera 支持）
我这样做：
`<input id="xyz" type="FILE" value=""
ondragover ="this.style.backgroundColor='#88FF88';"
ondragleave="this.style.backgroundColor='#FFFFFF';"
/>
<input type="button" onclick="srFU(this);" value="send File" />`
目前绝对没有纯 css跨浏览器解决方案用于在将元素拖放到浏览器窗口时更改元素的属性。
您在这里尝试做的事情可以通过 Javascript/jQuery 使用隐藏容器来实现，并且仅当对象位于可拖动容器内时才显示它。
如果你想看看，我之前保存了这个演示：
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">-> drop here <-</div>
<div id="d2">and stuff will happen</div>
</body>