Question

无论如何使用CSS或JS你可以调整firefox中的输入类型=“文件”浏览按钮吗？

我知道你不能改变按钮的文本，但我需要做的就是让firefox的这个按钮更宽。所以使用-moz css规则将是完美的。

Answer 1

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

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

Answer 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/

Answer 3

以下是主要想法：http://www.quirksmode.org/dom/inputfile.html

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

input{font-size: 100px;}

对我来说很好。

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

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

Answer 6

至于我，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*/
}

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

6 个答案: