html自带的input 按钮很丑，为了优化可以将其设置opacity:0 并在外层包裹一层标签。
其中 &::-webkit-file-upload-button { cursor:pointer; } 是保证鼠标移动到input上时的手势和移动到a标签一致
html
<a href="javascript:void(0)">
<input type="file">上传文件
</a>
css代码是
.a-upload{
position: relative;
border:1px solid #20bba9;
border-radius: 2px;
height: 20px;
line-height: 20px;
padding:4px 10px;
overflow: hidden;
cursor: pointer;
&:hover{
text-decoration: none;
}
input{
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
opacity:0;
cursor: pointer;
&::-webkit-file-upload-button { cursor:pointer; }
}
}
网友评论