html自帶的input 按鈕很丑柿赊，為了優(yōu)化可以將其設(shè)置opacity:0 并在外層包裹一層標(biāo)簽徽职。
其中 &::-webkit-file-upload-button { cursor:pointer; } 是保證鼠標(biāo)移動到input上時的手勢和移動到a標(biāo)簽一致
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; }
}
}
