输入[type ="file"]用css检查文件附件的存在

Question

这不是一个JS问题,只是寻找一个明确的css解决方案,如果可能的话.

对于单选按钮或复选框,我们可以使用:checked伪类:

input{
  % styles %
}
input:checked{
  % another styles %
}

有没有检查文件附件是否与CSS存在的技巧？

Answer 1

（由于误解问题而更新）

可以使用 属性 检查文件是否已附加required。

请参阅： http: //jsfiddle.net/1ua59jt1/1/

HTML：

<input id="file" type="file" name="fileselect" required="required" />

CSS：

#file:valid { color: green; }
#file:invalid { color: red; }

但您永远无法真正验证是否以这种方式选择了“正确”文件。您只能检查是否选择了文件。

// 完成更新：

该required属性是 HTML5。请注意，并非所有浏览器都支持此功能：http ://www.w3schools.com/tags/att_input_required.asp

这意味着客户端验证的唯一可信方法是使用 JavaScript。如果您想这样做，我建议您使用novalidate表单上的属性来禁用浏览器默认验证（http://www.w3schools.com/tags/att_form_novalidate.asp）。

但也始终使用服务器端验证。你永远无法确定用户是否启用了 jaavscript 或者没有操作过 javascript。因此，最好的方法始终是在您完全控制的一侧验证值：服务器，即表单将其数据发送到的您的操作。