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.效果图