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

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

对我来说很好.