在Firefox中调整输入类型=“文件”浏览按钮的大小？答案

【问题标题】：Resize the input type="file" browse button in firefox?在Firefox中调整输入类型=“文件”浏览按钮的大小？
【发布时间】：2011-11-04 02:22:46
【问题描述】：

有没有使用 CSS 或 JS 可以调整 firefox 中输入 type="file" 浏览按钮的大小？

我知道您无法更改按钮的文本，但我需要做的就是让该按钮更宽，以便用于 Firefox。所以使用 -moz css 规则将是完美的。

【问题讨论】：

标签： javascript css firefox

【解决方案1】：

出于安全原因，文件输入按钮的样式非常有限。有一些解决方法，但没有一个是完美的。在 QuirksMode 上查看这篇文章：

http://www.quirksmode.org/dom/inputfile.html

【讨论】：

【解决方案2】：

编辑：正如其他人所指出的，firefox 不支持以下方法，我将参考以下链接http://www.quirksmode.org/dom/inputfile.html

以下是一个非常简单的解决方案。不过，我建议在标签中添加一个类。基本上，您设置标签而不是输入的样式，以避免跨浏览器问题以及宽度和高度错误：

<label>
  <input type=file>
</label>

CSS

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;}
label {background:green;width:200px;height:100px;display:block; /* more styles here */}

http://jsfiddle.net/DVLxp/

【讨论】：

这非常有效。我最终使用另一个示例调整了图像大小以适应上传按钮的大小，但这很棒！而且很简单！
在 Firefox 中，您无法单击文件输入标签
在 Firefox 中，整个绿色区域不可点击，并且不显示指针。

【解决方案3】：

这里是主要思想：http://www.quirksmode.org/dom/inputfile.html

这可能有助于调整输入区域的大小

input{font-size: 100px;}

对我来说很好。

【讨论】：

【解决方案4】：

网站在需要“自定义”文件上传小部件时通常会做什么：隐藏“真实”文件上传字段。添加将显示文件上传字段的当前值的文本字段和将触发文件上传字段中的文件选择的按钮。举个例子：

<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">

【讨论】：

+1 这对我来说非常有效，似乎是最简单的快速解决方案。谢谢

【解决方案5】：

试试这个：http://jsfiddle.net/CnHj5/ 在 Firefox 中工作，并且提供了一个不错的指针光标。

HTML：

<div class="upload">
    <input class="upload" type="file" />
</div>

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;}

【讨论】：

【解决方案6】：

至于我，热亚舍甫琴科给出了最好的工作解决方案之一。使用他的方法，我们可以创建跨浏览器的文件输入按钮：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*/
}

【讨论】：