样式<input type =“file”>
可能重复：
造型inputtypes=“文件”button
我正在尝试风格
<input type="file"> 但是我没有太多的运气。 我想让文本框消失，只保留button。 我该怎么做？
CSS方式（在这里find的基本代码）：
<html> <style type="text/css"> div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } div.fakefile input[type=button] { /* enough width to completely overlap the real hidden file control */ cursor: pointer; width: 148px; } div.fileinputs input.file { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } </style> <div class="fileinputs"> <input type="file" class="file" /> <div class="fakefile"> <input type="button" value="Select file" /> </div> </div> </html>
没有简单的跨浏览器方式来设置inputtypes的文件。 所以有甚至使用javascript的解决scheme。
下面是一个jQuery插件，您可以使用它来以跨浏览器的方式来设置文件types的样式：
- jQuery的文件样式插件
浏览器不会让你风格文件input。 文件样式插件修复了这个问题。 它使您可以使用图像作为浏览button。 您也可以使用css将文件名字段设置为普通文本字段。 它使用JavaScript和jQuery编写。
你可以在这里看看演示
同样也发布在stream行的ajaxian.com上，你也可以看看这个：
- 风格的inputtypes=“文件”
Shaun Inman有一个可爱的小黑客，可以让你使用CSS和DOMdevise文件input。
这些元素是非常痛苦的处理，现在我们已经select了盒装好玩的IE浏览器，我们需要别的东西来修复:)
<label for="file" style="/* style this one, as you want */">Upload file</label> <input id="file" name="file" type="file" style="display:none;">
一些浏览器需要文件input可见，并手动点击浏览button，否则它不会向服务器提交任何内容。 所以我build议Saefraz的第一个解决scheme：jQuery的文件样式插件
