按钮美化

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; }

}

}