Question

说我有一个input type="file"字段。可以在此input上删除文件（如在Firefox中），而不是单击＆＃34;浏览＆＃34;并选择文件。

现在，我想通过在input中删除文件时更改字段的背景颜色来稍微自定义它。我无法真正使用:hover，因为它匹配即使你没有拖放也是如此。有没有CSS（伪类）呢？

如果不接受丢弃的文件，是否有一种CSS方式来设置不同的样式？比如说，如果该字段仅接受使用accept属性的PNG文件，如果您要将PNG文件放在其上，我会将该字段设为绿色，如果该字段是另一种类型的文件则为红色。

今天有 CSS 方式吗？是否有计划的方法在 CSS 中执行此操作（如在即将发布的规范/当前规范中，但在任何地方都没有实现）？

Answer 1

更新：感谢@ Renato的评论，根据https://github.com/w3c/csswg-drafts/issues/2257，drop pseudo-class现已被删除。

有public List<DesktopItems> fetchItems(String after) { List<DesktopItems> items = new ArrayList<>(); int count = 0; int counter = count + 25; try { String url = Uri.parse("https://www.reddit.com/r/battlestations/hot.json") .buildUpon() .appendQueryParameter("after", after) .build() .toString(); String jsonString = getUrlString(url); Log.i(TAG, "Received JSON: " + jsonString); JSONObject jsonBody = new JSONObject(jsonString); parseItems(items, jsonBody); return items; }和:drop伪类，目前处于Working Draft状态。

根据http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php，浏览器支持效果不佳。

对于“不接受放弃文件”的情况，:drop()预计将来会有效。

Answer 2

我有同样的问题，并且与nashcheez有点不同。尽管如此（我在这里使用jQuery来简化事情）仍然使用JavaScript：

＆＃13;

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"));
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我已经在Safari，Firefox和Chrome上对此进行了测试，但我还没有尝试过IE。我可能违反了自定义属性的规则，但在我等待CSS4的时候似乎有效。

Answer 3

当将元素拖放到浏览器窗口时，目前绝对没有用于更改元素属性的纯css 跨浏览器解决方案。

您在此处尝试执行的操作可以通过Javascript / jQuery使用隐藏容器实现，并仅在对象位于可拖动容器内时显示。

如果你想查看一下我之前保存的这个演示：

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

没有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＆＃34;：drop-hover＆＃34;伪类？

4 个答案: