标签：class inpu use 美化 change absolute round NPU 透明
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;
width: 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.效果图
input[type=file] 样式美化，input上传按钮美化
标签：class inpu use 美化 change absolute round NPU 透明
原文地址：https://www.cnblogs.com/crazycode2/p/12642176.html
