答案 0 :(得分:20)
CSS方式(找到基本代码here):
<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>
答案 1 :(得分:12)
没有简单的跨浏览器方式来设置输入类型的文件的样式。因此存在甚至使用javascript的解决方案。
这是一个jQuery插件,您可以使用它以跨浏览器方式设置文件类型:
浏览器不允许您设置文件样式 投入。文件样式插件修复了这个问题 问题。它使您可以使用图像 作为浏览按钮。你也可以风格 filename字段为普通文本字段 用css。它是用来写的 JavaScript和jQuery。
You can check out the demo here
同样刊登在热门的ajaxian.com上,您也可以看一下:
Shaun Inman有一个可爱的小小 hack,允许你设置文件样式 使用CSS和DOM输入。这些因素众所周知是痛苦的 处理,现在我们选择 盒装在IE上玩得很好,我们需要 别的东西要修理:)
答案 2 :(得分:4)
答案 3 :(得分:3)
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
答案 4 :(得分:0)
某些浏览器需要文件输入可见并手动单击浏览按钮,否则它将不向服务器提交任何内容。所以我建议Saefraz的第一个解决方案:jQuery的文件样式插件