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

我正在使用javascript来添加使用CSS盒阴影的红色发光，以形成未正确填充的字段。我遇到了我的文件输入字段的问题，在Firefox中，辉光围绕浏览按钮展开，我也无法删除默认边框。带框阴影的样式输入类型=“文件”

有没有办法实现这与CSS？

谢谢。

下面是一个例子 -

enter image description here

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

来源

2012-01-07 Tom

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

例如类似this

来源

2012-01-07 19:31:05 defau1t

谢谢，我采纳了这个想法，并创建了一个有一些填充的div，并在整个领域中走来走去。到目前为止，它似乎在Firefox和Chrome中完成了这项工作。 – Tom 2012-01-07 19:56:07

有时AG o我遇到类似文件输入的类似问题。这是我能找到的最好的：http://www.quirksmode.org/dom/inputfile.html

希望这可以帮助你。

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

来源

2012-01-07 19:25:54 Diego

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

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

或者使用jQuery的选择：

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

来源

2012-01-07 19:26:57 Qorbani

谢谢，这些是有用的链接。不是我想要做的事，但他们将在未来有用。 – Tom 2012-01-07 19:56:44

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

回答

相关问题