HTML5：如何指定文件输入框的宽度？

Question

W3C验证器显示："此处不允许在input元素上使用size属性。"

<input type="file" name="foo" size="40" />

在HTML5中，指定文件输入框的宽度正确的方法是什么？

- Brian Bi

---

https://dev59.com/9m445IYBdhLWcg3wWI6L - Sirko

Answer 1

在输入字段中使用style属性，这将允许您使用CSS。

<input type="file" name="foo" style="width: 40px" />

或者使用单独的CSS：

input[name="foo"] {
  width: 40px;
}

- silppuri

---

Firefox忽略了“width”属性。这是我尝试的第一件事。 - Brian Bi

当然。那么我认为你应该支持宽度属性和大小以实现跨浏览器兼容性。或者尝试@Sirko发布的链接中提供的解决方法。 - silppuri

如果你想到了解决方案，请告诉我 :) - silppuri

现在width在Firefox上也可以使用了。 - djvg

Answer 2

在您的CSS文件中，将宽度指定为以下方式：

input[type=file] { width: 300px; border: 2px solid red; }

http://jsfiddle.net/VbTAV/

- Dalex

---

我正在使用Firefox，在你的例子中，实际上是“size”属性控制宽度（尽管不被允许），而不是“width”属性。我尝试将你的例子中的“width”更改为200或400，但没有任何效果。 - Brian Bi

True。目前来看，size属性似乎是处理Firefox的方法。 - Dalex

现在width在Firefox上也可以使用了。 - djvg

Answer 3

如其他答案所建议的，可以使用CSS设置整个文件输入框（即按钮和文件名文本）的width，方法如下：

input[type="file"] {
  /* functional */
  width: 100%;
  /* cosmetic */
  background-color: steelblue;
}

<input type="file">

（现在Firefox也可以运行此代码。）

然而，这并没有改变文件选择按钮的宽度。这可能会导致剪裁等问题，正如下面的代码片段所示。

input[type="file"] {
  width: 40px;      
}

<input type="file">

要修改文件选择按钮的宽度（和/或其他按钮样式），您可以使用::file-selector-button伪元素。例如：

input[type="file"] {
  width: 40px;
}

input:last-of-type::file-selector-button {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* cosmetic */

body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

<input type="file">
<input type="file">

- djvg

---

这并不完全符合您所描述的内容。在Firefox浏览器中，第二个和第三个代码示例显示宽度覆盖整个输入区域（按钮和文件名区域），而不仅仅是按钮。在CSS中，按钮应该是文件输入的子元素。 - Martin

@martin 抱歉，我不太确定您的意思。您能否澄清一下？也许我的描述不够清晰：第二个代码示例应该显示一个没有文件名区域的剪裁按钮。第三个示例应该显示一个完整的没有文件名区域的按钮。据我所知，按钮是文件输入的固有部分，因此需要特殊选择器。 - djvg

不，第三个示例在Firefox上显示为“Bro....”。 - Martin

@Martin 是的，这是有意为之的。我所指的“完成按钮”是指包括圆角等在内的按钮元素。默认的按钮文本不适合，因此根据示例中的text-overflow规定，它被裁剪并带有省略号。 - djvg

在第二个示例中，整个按钮被剪裁，切断了边框等。在第三个示例中，只有按钮文本被剪裁。无论如何，这只是一个说明。预期的消息是：如果您需要为文件选择器按钮设置样式（它是文件输入的一部分），则需要使用::file-selector-button。 - djvg

@Martin我修改了第三个例子，以方便比较使用和不使用::file-selector-button的情况。希望这有所帮助。 - djvg

Answer 4

你需要将“input”放在一个div中：

  <div style="width: 40%">
     <input class="d-flex justify-content-end align-items-center" style="background-color: yellow; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%" type="file" id="file"/>
  </div>

- Silvio Guedes

Answer 5

<form  class="upload-form">
    <input class="upload-file" data-max-size="2048" type="file" >
    <input type=submit>
</form>
<script>
$(function(){
    var fileInput = $('.upload-file');
    var maxSize = fileInput.data('max-size');
    $('.upload-form').submit(function(e){
        if(fileInput.get(0).files.length){
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if(fileSize>maxSize){
                alert('file size is more then' + maxSize + ' bytes');
                return false;
            }else{
                alert('file size is correct- '+fileSize+' bytes');
            }
        }else{
            alert('choose file, please');
            return false;
        }
    });
});
</script>

http://jsfiddle.net/9bhcB/2/

- Epsil0neR