样式输入类型=“文件”，带有框阴影

Question

我正在使用javascript使用CSS box-shadow添加红色光晕以形成填充不正确的字段。我遇到了文件输入字段的问题，在Firefox中，发光在浏览按钮周围延伸，我也无法删除默认边框。

有没有办法用CSS实现这个目标？

感谢。

这是一个例子 -

HTML

<input type='file' id='userfile' name='userfile' maxlength='80' class='form-input'/>

正在分配的CSS类

.field-error { -webkit-box-shadow: 1px 1px 5px 5px #ff0000; -moz-box-shadow: 1px 1px 5px 5px #ff0000; box-shadow: 1px 1px 5px 5px #ff0000; border: none; }

Answer 1

据我所知，CSS操作完全无法访问“浏览”按钮。你需要一些技巧来克服这个问题。我建议你看一下这篇文章：

• http://www.quirksmode.org/dom/inputfile.html

或者使用jQuery替代方法：

• http://www.appelsiini.net/projects/filestyle

Answer 2

前段时间我遇到了类型文件输入的类似问题。这是我能找到的最好的：http://www.quirksmode.org/dom/inputfile.html

希望这会对你有所帮助。

更新：还有一个jquery插件来设置输入字段的样式：http://www.appelsiini.net/projects/filestyle

Answer 3

虽然这不是实现此目标的标准方法，但是你有一种在文件元素周围创建一个div给div一个盒子阴影并使用宽度来解决这个问题，但是这只适用于firefox，因为chrome有不同的呈现文件上传元素的方式。

例如this

之类的内容