input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
1.html
<div className="file">
<input
type="file"
onChange={(e)=>{this.onChange(e)}}
className='getImg'
title={this.state.title}
id="fileinput"
ref='onChange'
accept="image/*"
// capture="camera"
/>
</div>
2.css
.file {
height: 2rem;
2rem;
border: 0.02rem solid #eee;
border-radius: 0.05rem;
margin: 0.4rem auto;
background-image: url(../../assets/images/user_center/plus.png);
background-repeat: no-repeat;
background-position: 50%;
input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
}
3.效果图