css input file 美化

39次阅读

共计 354 个字符,预计需要花费 1 分钟才能阅读完成。

html 代码
<div class=”file-container”>
<input type=”file” name=”img”>
</div>
css 代码
.file-container {
position: relative;
width: 7rem;
height: 6rem;
background: url(‘../common/images/ui/ 组 1.png’) center center no-repeat;
background-size: 100%;
}
.file-container input {
position: absolute;
display: block;
width: 100%;
height: 100%;
right: 0;
top: 0;
opacity: 0;
}
input 撑满父容器,透明度设置为 0,就可以随意设置父元素样式了。效果:

正文完
 0