设置输入 type =“file” 按钮的样式

您如何设置输入type="file"按钮的样式？

答案

您不需要 JavaScript！这是跨浏览器的解决方案：

看这个例子！ - 适用于 Chrome / FF / IE-（IE10 / 9/8/7）

最好的方法是将一个带有for属性的自定义标签元素附加到隐藏文件输入元素上。（标签的for属性必须与文件元素的id匹配，这样才能起作用）。

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

或者，您也可以直接在文件输入元素上直接加上标签：（示例）

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

就样式而言，只需使用属性选择器^{隐藏 1}输入元素。

input[type="file"] {
    display: none;
}

然后，您要做的就是设置自定义label元素的样式。 （示例） 。

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

^1-值得注意的是，如果您使用display: none ，则在 IE8 及以下版本中将无法使用。另请注意，jQuery validate 默认不会验证隐藏字段。如果任这些东西都是你的一个问题，这里有两个不同的方法来隐藏输入（ 1 ， 2 ）在这种情况下的工作。

众所周知，对文件输入进行样式设置非常困难，因为大多数浏览器都不会通过 CSS 或 javascript 更改外观。

即使输入的大小也不会响应以下内容：

<input type="file" style="width:200px">

相反，您将需要使用 size 属性：

<input type="file" size="60" />

对于比这更复杂的样式（例如，更改浏览按钮的外观），您将需要研究将样式按钮和输入框覆盖在本机文件输入上方的棘手方法。 rm 在 www.quirksmode.org/dom/inputfile.html 上已经提到的文章是我见过的最好的文章。

更新

尽管很难<input> <label>标记的帮助下轻松实现。请参阅 @JoshCrozier 下方的答案： https://stackoverflow.com/a/25825731/10128619

请按照以下步骤操作，然后您可以为文件上传表单创建自定义样式：

这是简单的 HTML 表单（请阅读我在下面编写的 HTML 注释）

<form action="#type your action here" method="POST" enctype="multipart/form-data">
  <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
  <!-- this is your file input tag, so i hide it!-->
  <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <input type="submit" value='submit' >
</form>

然后使用此简单脚本将 click 事件传递到文件输入标签。
```
function getFile(){
     document.getElementById("upfile").click();
}
```
现在，您可以使用任何类型的样式，而不必担心如何更改默认样式。

我非常了解这一点，因为我已经尝试更改默认样式一个半月了。相信我，这非常困难，因为不同的浏览器具有不同的上载输入标签。因此，使用此文件来构建您的自定义文件上传表单。这是完整的 AUTOMATED UPLOAD 代码。

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>