javascript 在 Firefox 中调整 input type="file" 浏览按钮的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7197835/
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
Resize the input type="file" browse button in firefox?
提问by Fostah
Is there anyway using CSS or JS that you can resize the input type="file" Browse button in firefox?
无论如何，是否可以使用 CSS 或 JS 来调整 Firefox 中的 input type="file" Browse 按钮的大小？
I know you cannot change the text of the button but all I need to do is make this button wider for firefox. So using a -moz css rule would be perfect.
我知道您无法更改按钮的文本，但我需要做的就是为 Firefox 设置更宽的按钮。所以使用 -moz css 规则将是完美的。
采纳答案by Paul
Styling file input buttons is very limited for security reasons. There are some workarounds, but none are perfect. Check out this post on QuirksMode:
出于安全原因，样式文件输入按钮非常有限。有一些解决方法，但没有一个是完美的。在 QuirksMode 上查看这篇文章：
回答by Lime
Edit:As others have noted firefox does not suuport the method below I would refer to the following link http://www.quirksmode.org/dom/inputfile.html
编辑：正如其他人所指出的，firefox 不支持下面的方法，我会参考以下链接http://www.quirksmode.org/dom/inputfile.html
The following is a pretty simple solution. I would advise adding a class to the label though. Basically you style the label instead of the input avoiding cross browser issues and width and height bugs:
下面是一个非常简单的解决方案。不过，我建议在标签中添加一个类。基本上，您可以设置标签而不是输入的样式，以避免跨浏览器问题以及宽度和高度错误：
<label>
<input type=file>
</label>
CSS
CSS
label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;}
label {background:green;width:200px;height:100px;display:block; /* more styles here */}
回答by Yevgen
Here is the main idea: http://www.quirksmode.org/dom/inputfile.html
这是主要思想：http: //www.quirksmode.org/dom/inputfile.html
And this might be helpfull for resizing input area
这可能有助于调整输入区域的大小
input{font-size: 100px;}
Works fine for me.
对我来说很好用。
回答by gertas
Try this one: http://jsfiddle.net/CnHj5/Works in Firefox and a nice pointer cursor is available.
试试这个：http: //jsfiddle.net/CnHj5/在 Firefox 中工作，并且有一个很好的指针光标可用。
HTML:
HTML：
<div class="upload">
<input class="upload" type="file" />
</div>
CSS:
CSS：
input.upload {
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
position: absolute;
right:0;
font-size: 200px;
cursor: pointer;
}
div.upload {
background-color:green;
width:200px;
height:100px;
position: relative;
display:block;
overflow:hidden;}
回答by Wladimir Palant
What websites often do when they need a "customized" file upload widget: have the "real" file upload field hidden. Add a text field that will show the current value of the file upload field and a button that will trigger file selection in the file upload field. Here an example:
网站在需要“自定义”文件上传小部件时通常会做什么：隐藏“真实”文件上传字段。添加将显示文件上传字段的当前值的文本字段和将触发文件上传字段中的文件选择的按钮。这里有一个例子：
<input id="file" type="file" style="display: none;"
onchange="document.getElementById('text').value = this.value;">
<input id="text" type="text" readonly><input type="button"
onclick="document.getElementById('file').click();" value="Choose file">
回答by Webars
As for me, Zhenya Shevchenko gave one of the best working solutions. Using his method, we can create cross-browser file input button: http://jsfiddle.net/JHcFR/
至于我，Zhenya Shevchenko 给出了最好的解决方案之一。使用他的方法，我们可以创建跨浏览器文件输入按钮：http: //jsfiddle.net/JHcFR/
<div class="fileInput">
<input type="file" />
</div>
.fileInput {
overflow: hidden; width: 500px; height: 200px; background: red;
}
.fileInput input {
font-size: 200px; opacity: 0;
float: right; filter: alpha(opacity=0); /*IE*/
}
