Jasin Yip

如何为 HTML 的 input[type=file] 按钮定义样式

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

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

首先,我们的 HTML 这样写:

index.html

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

备注:btnbtn-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:

上传 上传 上传 上传 上传

标签:web前端开发, css

已有 2 条评论

  1. 为什么input没有显示

添加新评论