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.效果图
相关文章
- DVWA之File Upload (文件上传漏洞)
- jQuery file upload上传图片的流程
- [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
- 在阿里云创建私有仓库上传并拉取
- 转 UTL_FILE Throws ORA-29284 Or ORA-29283 When Attempting To READ File
- TPC-DS tools生成数据:ERROR: Failed to open output file! File print.c Line: 490
- (独孤九剑)--文件上传
- linux 服务器(CentOS7)搭建PHP环境+SSH配置+服务器文件上传配置
- jquery文件上传控件 Uploadify(转)
- input type=file实现图片上传,预览以及图片删除
- 上传文件时,将file对象,经过Qs.stringfly处理后,file文件被过滤
- input文件上传(上传单个文件/多选文件/文件夹、拖拽上传、分片上传)
- 【开发工具】最强MarkDown编辑器Typora+图床七牛云实现图片自动上传
- 使用Fundebug API 批量上传Source Map
- 【HMS Core】机器学习服务助力APP快速集成图像分割与上传功能
- java 文件上传,上传文件大小转换为 GB/MB/KB/B