我知道样式化文件输入框的选项非常有限,但这并不是坏事。
有没有办法选择空的文件输入框?
计划根据文件输入框是否为空来显示或隐藏提交按钮。
我知道样式化文件输入框的选项非常有限,但这并不是坏事。
有没有办法选择空的文件输入框?
计划根据文件输入框是否为空来显示或隐藏提交按钮。
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>
required
的用法。 - Cody有没有一种方法可以选择空的文件输入?
没有。
你需要使用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>
element.files
。 - masterpreenz