zl程序教程

您现在的位置是:首页 >  后端

当前栏目

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

上传 File type 样式 按钮 input 美化
2023-09-11 14:15:29 时间

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