CSS 我们可以更改 <input type="file"> 样式吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2825509/
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
Can we change <input type="file"> style?
提问by learner.php
I tried to change the HTML form, input type file. Here is my code:
我试图更改 HTML 表单，输入类型文件。这是我的代码：
HTML, form id = form
HTML，表单 ID = 表单
<input class="upload_file" type="file" id="file" name="file" />
.CSS
.CSS
I tried both:
.upload_button{
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
}
#form input[type=file]{
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
}
None of both of those methods works. I did see from some website, like facebook, youtube, google or twitter, they have different style. Wonder how they do it.
这两种方法都不起作用。我确实从一些网站上看到，比如 facebook、youtube、google 或 twitter，它们有不同的风格。想知道他们是怎么做到的。
采纳答案by Marcos Placona
You can't do anything with input type file (other than huge hacks). I know this sounds horrible, but the web standards still haven't come up with a solution for that.
你不能对输入类型文件做任何事情（除了巨大的黑客）。我知道这听起来很可怕，但网络标准仍然没有为此提出解决方案。
What I would suggest though, is that you used something more flexible, such as swfUpload, which let's you change stiles, and also check for file size prior to uploading.
不过，我建议您使用更灵活的方法，例如swfUpload，它可以让您更改 stiles，并在上传之前检查文件大小。
Some neat examples of it can be found here
一些简洁的例子可以在这里找到
Hope this helps you
希望这对你有帮助
回答by Gopher
For example, try this variant http://www.quirksmode.org/dom/inputfile.html
回答by Donald Derek
Best hack ever. Input file HTML:
有史以来最好的黑客。输入文件 HTML：
<input type="file" class="hide" id='inputFile' />
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a>
using jQuery:
使用jQuery：
$('#triggerFile').on('click', function(e){
e.preventDefault()
$("#inputFile").trigger('click')
});
回答by user1282947
Why don't you just put the css to display: none and then trigger this button with another button? This can be easily done with javascript and then you can style the button yourself completely
你为什么不把 css 放在 display: none 然后用另一个按钮触发这个按钮？这可以使用 javascript 轻松完成，然后您可以完全自己设置按钮样式
Here's an example of how to trigger a button with another, but this is just one of many ways: One button firing another buttons click event
这是一个如何用另一个按钮触发按钮的示例，但这只是众多方法之一： 一个按钮触发另一个按钮单击事件
回答by Thiago Miranda de Oliveira
You can change the font-Size for height or follow this url http://www.quirksmode.org/dom/inputfile.html( which is basically what I do in my projects ).
您可以更改高度的字体大小或按照此网址http://www.quirksmode.org/dom/inputfile.html（这基本上是我在我的项目中所做的）。
回答by Habib Hoxha
回答by B?a?ej Kocik
Bhee, just add CSS definitions to your html input tag:
Bhee，只需将 CSS 定义添加到您的 html 输入标签：
like:
喜欢：
<select style:"...whatYoureadBelow..."></select>
or
或者
<input style:"...whatYoureadBelow..." />
CSS definitions:
CSS定义：
border:none;
background-image:url('somePathToImage');
background-repeat:no-repeat;
//those things below adjust according to your background image size
width:XXpx;
height:XXpx;
Thus you'll get what you have on facebook or elsewhere ;)
因此你会得到你在 facebook 或其他地方拥有的东西 ;)
