CSS选择器用于空文件输入。

Question

我知道样式化文件输入框的选项非常有限，但这并不是坏事。

有没有办法选择空的文件输入框？

计划根据文件输入框是否为空来显示或隐藏提交按钮。

- Manngo

---

你不能在没有 JavaScript 的帮助下使用 element.files。 - masterpreenz

你应该使用JavaScript来完成这样的事情。 - FluffyKitten

是的，我不小心在第二行删除了“there”。但是没有必要在你的问题前面加上前缀以防止任何人说你不能输入样式元素 - 这是常识，它们可以被样式化，如果有人对此一无所知，他们根本不应该回答，可以忽略 :) - FluffyKitten

@MoisheLipsker 是和不是的 —— 我无法让它对我起作用，所以不行，但如果它起作用了，那么是的。 - Manngo

我对多个人声称无法使用CSS实现此功能感到困惑，但是看到被接受的答案是纯CSS解决方案 ¯_(ツ)_/¯ - ESR

@Edmund Reed：被接受的答案之所以被选择，是因为特定的用例意味着文件输入可以简单地标记为必需的，因为整个重点是禁止表单提交，除非选择了文件。但对于一般问题的答案仍然是，如果字段是可选的，则确实无法使用CSS匹配空文件输入。 - BoltClock

Answer 1

如果您习惯将标记为，则可以使用css轻松实现：https://dev59.com/xG855IYBdhLWcg3wuG-W#12081682

input:invalid ~ .chosen {
    display: none;
}
input:valid ~ .empty {
    display: none;
}

<input type="file" required><br>

<span class="empty">Empty</span>
<span class="chosen">Chosen</span>

- Moishe Lipsker

---

这是相当不错的方法。整个重点是文件在提交之前是必需的，这就是为什么我想要隐藏它的原因。谢谢。 - Manngo

Brill-yantz。喜欢required的用法。 - Cody

Answer 2

有没有一种方法可以选择空的文件输入？

没有。

你需要使用JavaScript。你可以在这里和其他地方找到几个答案。基本思路是监听元素上的change事件，添加一个类，如non-empty，表示有文件被选择，然后样式化input[type="file"].non-empty + label，假设你正在使用将label作为替换文件输入按钮的技术。你将不得不特殊处理form.reset()，它会清空表单内的文件输入，但不会触发输入上的change事件。这是一些示例代码（不包括form.reset部分）：

// Add a class to a file input if it's not empty.
function mark() { this.classList.toggle('non-empty', this.files.length); }

// Watch a file input and update non-empty status.
function watch(input) { input.addEventListener('change', mark); }

// Get all file inputs.
const inputs = Array.from(document.querySelectorAll('input[type=file]'));

// Watch all file inputs in the whole document.
inputs . forEach(watch);

input[type="file"]                          { width: 0.1px; height: 0.1px; }
input[type="file"].non-empty + label        { color: green; }
input[type="file"].non-empty + label::after { content: ' (specified)'; }

<input type="file" id="input">
<label for="input">Specify file</label>

- user663031

---

0.1像素的尺寸引起了我的兴趣。是否有任何浏览器在display:none时无法提交文件输入？ - BoltClock

@BoltClock 显然是的，至少根据我曾经在某个地方看到的东西是这样的。 - user663031