设置输入类型=“file”按钮的样式

Question

设置输入类型=“file”按钮的样式

如何设置输入的样式type="file"纽扣。

Answer 1

这不需要JavaScript！以下是跨浏览器解决方案：看这个例子！-在Chrome/FF/IE中工作-(IE10/9/8/7)最好的方法是有一个带有for属性附加在隐秘文件输入元素(标签是for属性必须与文件元素的id为了让这件事起作用)。<label&nbsp;for="file-upload"&nbsp;class="custom-file-upload"> &nbsp;&nbsp;&nbsp;&nbsp;Custom&nbsp;Upload</label><input&nbsp;id="file-upload"&nbsp;type="file"/>作为另一种选择，您还可以直接用标签包装文件输入元素：(例如)<label&nbsp;class="custom-file-upload"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="file"/> &nbsp;&nbsp;&nbsp;&nbsp;Custom&nbsp;Upload</label>在造型方面，只要藏起来1控件的输入元素。属性选择器.input[type="file"]&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;}那么，您所需要做的就是对自定义进行样式化。label元素。(例如)..custom-file-upload&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#ccc; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;6px&nbsp;12px; &nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer;}1-值得注意的是，如果您使用display: none，它不会在IE8或更低的地方工作。还要注意jQuery验证这一事实。不验证隐藏字段默认情况下。如果其中任何一件事对您来说都是问题，下面有两种不同的方法来隐藏输入(1,&nbsp;2在这种情况下起作用。