<input type="file"/>的这个默认样式真的是简单明了啊~
怎么改成自己想要的效果呢?
讲这个input框设置成 opacity:0,然后再在外面框个盒子,设置成自己想要的样式即可!
下面是我当时候要做的效果,然后就发现了这么个牛逼的东西:
代码:
<div class="upfile">
<p><span>请上传文件</span><i></i></p>
<input type="file" class="form-control btn " id="file" style="opacity: 0;" @change="getFile($event)"/>
</div>
p{
position: absolute;
right: 0.4em;
top: 0.4em;
display: flex;
justify-content: space-between;
width: 95%;
}
i{
display: inline-block;
width: 2em;
height: 1.5em;
background: url(../../static/image/ic_uploading_normal.png) no-repeat center;
}
.upfile{
color: white;
border: 1px solid #7d7290;
padding: 0;
height: 2.4em;
}
效果:
HTML <input> 标签的 type 属性:https://www.w3school.com.cn/tags/att_input_type.asp