常见思路

将默认的input:file隐藏，然后让外层容器的按钮样式展示出来。

方法1：

将input:file透明度设置为0，并设置大小，将外层的容器设置样式。

1
2
3
4
5
6
7
<div class="file-btn">
    <a>添加文件</a>
    <input autocomplete="off" type="file" id="fileupload" name="files" class="add-file" multiple>
</div>

.file-btn{float: left;background: #004c6f;line-height: 30px;width:100px; text-align:center;position: relative; text-indent:-200em}
.add-file{position: absolute;width: 100px;height: 30px;left:0;top:0;opacity: 0;cursor: pointer;}

方法2：

隐藏input:file，利用label标签。
label有个特殊的聚焦特性，点击label区域，相当于点击其对应的input区域，有两种写法：

  1. label for id 方法， <label for="inputFile"></label><input type="file" id="inputFile">
  2. label包含input方法, <label><input type="file"></label>
1
2
3
4
5
6
7
8
9
<div class="file-btn">
    <label>
    <a>添加文件</a>    
    <input autocomplete="off" type="file" id="fileupload" name="files" class="add-file" multiple>
    </label>
</div>

.file-btn{float: left;background: #004c6f;line-height: 30px;width:100px; text-align:center;position: relative;}
.add-file{display:none'}