输入文件类型的 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10005606/
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
CSS styling on Input File type
提问by Kheema Pandey
I am styling an Input File type using only CSS, and it works on every browser expect Firefox 11.0. CSS:
我仅使用 CSS 为输入文件类型设置样式，它适用于除 Firefox 11.0 之外的所有浏览器。CSS：
label{
background:url(http://www.itilexamapp.com/images/upload.png) no-repeat 0 0;
padding:5px;
display:inline-block;
}
input[type="file"]
{-moz-opacity:0;
-webkit-opacity:0;
filter:alpha(opacity=0);
padding:6px;
width:200px;
}
HTML:
HTML：
<label>
<input type="file" name="file_upload" />
</label>
You can see the code working here:
你可以在这里看到代码工作：
采纳答案by anuj_io
Here is the solution, add this to your styles. :
这是解决方案，将其添加到您的样式中。：
input[type="file"] {opacity: 0;}
I think Firefox 11 has stopped entertaining some of the vendor prefixes (-moz-opacity here) now.
我认为 Firefox 11 现在已经停止使用一些供应商前缀（这里是 -moz-opacity）。
回答by anuj_io
Optionally, you could simplify it with:
或者，您可以通过以下方式简化它：
<div id='label'><input type='file' size='1' class='upload'></div>
And the CSS being:
而 CSS 是：
#label{
width: 100px;
height: 50px;
background: #fff url('YOURUPLOADIMAGE.png') no-repeat;
}
.upload{
opacity: 0;
font-size: 45px;
}
Of course, you would need to accomadate for browser support.
当然，您需要适应浏览器支持。
