Question

我有一个input type="file"元素size="70"和width="522px"。它在Windows上的所有浏览器中看起来都很好，但在Linux上的Firefox中，输入元素大于522像素。

我尝试的事情：

max-width:522px但它不起作用（Linux）。
设置size="52"和min-width:522px;在Linux中看起来不错，但在Windows上的Firefox中不起作用。

如何指定522像素的宽度？

Answer 1

问题是浏览器不会将该按钮视为输入的一部分。所以如果你有类似的东西：

<div style="width: 500px; overflow: hidden">
<input type="file" id="uploadfile_0" class="fileinput" style="border: 2px solid #a9a9a9; width: 100%; height: 22px;" name="uploadfile_0"/>
</div>

输入按钮浏览在父级之外，我认为没有一个简单的解决方案。

您可以在quirksmode.org上阅读about styling input type="file"

Answer 2

仅指定CSS width，如下所示：

<input type="file" style="width: 522px;" ..... />

Answer 3

我见过文件输入字段的唯一方法是通过一个技巧，其中字段实际上位于图像之上，并且该字段的透明度为零。

Answer 4

function inFil() {
    var inFil = document.getElementById("inFil");
    var iSize = inFil.files[0].size;
    alert(iSize);
   // where inFil is existing html tag <input type="button" id="inFil" >
}

适用于Firefox，但不适用于IE8，其他未经测试。

输入类型文件大小因Linux / Windows而异

4 个答案: