如何为 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>
备注: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:
为什么input没有显示
透明了