这两天由于产品设计的需求，需要给 HTML 文件上传按钮 input[type=file] 自定义一些样式。然而，它并不能直接去修改它的样式，这让人有点苦恼。

于是我 Google 了一下，找到了一个小技巧。

首先，我们的 HTML 这样写：

index.html

<a class="btn btn-primary btn-upload">
    <span>上传</span>
    <input type="file">
</a>

备注：btn 和 btn-primary 是 Bootstrap 的样式。

style.css

.btn-upload {
    position: relative;
    overflow: hidden;
}

.btn-upload input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Demo: