如何在html中为输入型文件上传添加css样式？

在Html表单中，Input type=file按钮允许我们从网页中上传文件。上传按钮的外观在不同的浏览器中表现不同。

设计这个上传按钮是一项繁琐的工作，这篇文章包括在CSS/Javascript中应用上传按钮的样式。在Bootstrap中还有其他的文件上传部件，本教程只讲述了自定义的css样式。

在html中，可以用下面的代码段来创建文件小工具

 <input type="file" name="uploadBtn">

默认外观如下所示

当用户从页面上选择文件时，用户界面包含了带有所选文件名称的文本框。

要像其他输入控件那样改变样式并不容易。

要设计这个小部件的样式，我们必须做以下几件事

• 输入框的样式
• 输入按钮的样式
• 当文件被选中时隐藏输入框

为上传按钮的样式添加标签

首先，为输入文件元素添加标签元素

<label id="uploadLabel">
</label>

输入文件元素被放在标签内

<label class="uploadLabel">
    <input type="file" class="uploadButton"/>
    Upload
</label>

使用css样式，使用display:none ，隐藏输入文件。

.uploadButton{
  display:none;
}

现在，用自定义样式改变标签的边框半径、背景颜色和边框，用纯css样式应用。

.uploadLabel {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 7px 15px;
  cursor: pointer;
  border-radius: 5px;
  background-color: blue;
  color: #ffffff;
}

输出:

如何在上传按钮上添加字体超棒的图标

这里是文件上传--fa-file-upload ，这个例子使用的是font awesome图标。

<i class="fas fa-file-upload"></i>

在标签中添加上传图标

<label class="uploadLabel">
      <i class="fas fa-file-upload"></i> 

    <input type="file" class="uploadButton"/>
    Upload
</label>
.uploadButton {
  display: none;
}
.uploadLabel {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 7px 15px;
  cursor: pointer;
  border-radius: 5px;
}