Javascript 样式 <input type="file">
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4532733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling <input type="file">
提问by Moon
Possible Duplicate:
Styling an input type=“file” button
可能的重复：
样式输入类型=“文件”按钮
I was trying to style
我试图风格
<input type="file">
but i have not had much luck. I want to make the textbox disappear and only keep the button. How can I do it?
但我没有多少运气。我想让文本框消失，只保留按钮。我该怎么做？
回答by
The CSS way (base code found here):
CSS 方式（基本代码在这里找到）：
<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>
回答by Sarfraz
There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.
没有简单的跨浏览器方式来设置文件的输入类型。因此存在甚至使用javascript的解决方案。
Here is a jQuery plugin you can use to style file types in the cross-browser fashion:
这是一个 jQuery 插件，您可以使用它以跨浏览器的方式设置文件类型的样式：
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.
浏览器不允许您设置文件输入的样式。文件样式插件修复了这个问题。它使您能够将图像用作浏览按钮。您还可以使用 css 将文件名字段设置为普通文本字段。它是使用 JavaScript 和 jQuery 编写的。
You can check out the demo here
As also posted on popular ajaxian.com, you can take a look at this too:
也发布在流行的 ajaxian.com 上，你也可以看看这个：
Shaun Inman has got a lovely little hack that allows you to style file inputs with CSS and the DOM.
These elements are notoriously painful to deal with, and now we have select boxed playing nice on IE, we need something else to fix up :)
Shaun Inman 有一个可爱的小技巧，可以让您使用 CSS 和 DOM 来设置文件输入的样式。
众所周知，这些元素处理起来很痛苦，现在我们选择了在 IE 上玩得很好的盒装，我们需要一些其他的东西来修复:)
回答by JSTNJNS
I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.
我编写了这个 jQuery 插件来简化文件输入的样式。使用 CSS 和“假元素”来获得你想要的结果。
http://github.com/jstnjns/jquery-file
http://github.com/jstnjns/jquery-file
Hope that helps!
希望有帮助！
回答by boz
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
回答by erinus
some browsers need File input visible and click the browse button manually, or it will submit nothing to server. so i suggest Saefraz's first solution: File Style Plugin for jQuery
有些浏览器需要文件输入可见并手动单击浏览按钮，否则它不会向服务器提交任何内容。所以我建议 Saefraz 的第一个解决方案：用于 jQuery 的文件样式插件
