input[type=file] 样式美化，input上传按钮美化

Posted 2021-03-02 crazycode2

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