更改file文件上传默认CSS样式
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
更改file⽂件上传默认CSS样式
前⾔：多数时候我们需要表单上传⽂件，如图⽚。
但是浏览器默认的input[file]样式很不友好，需要我们⾃⼰⼿动修改.
如图基于bootstrap布局的表单, 但file⽂件上传样式不敢恭维.
1<div class="form-group">
2<label for="avatar" class="col-md-2 control-label">上传头像:</label>
3<div class="col-md-6">
4<input type="file" name="avatar" id="avatar" class="form-control">
5</div>
6</div>
1. ⾸先在input[file]外层套⼀个容器（如div）
1<div class="form-group">
2<label for="avatar" class="col-md-2 control-label">上传头像:</label>
3<div class="col-md-6">
4<div class="avatar"><input type="file" name="avatar" id="avatar" class="form-control">点击这⾥上传⽂件</div>
5</div>
6</div>
2. 定义div.avatar样式，和input[file]样式
1.avatar {
2 position: relative;
3 display: block;
4 overflow: hidden;
5 width: 100%;
6 height: 34px;
7 line-height: 34px;
8 border: 1px solid #99D3F5;
9 border-radius: 4px;
10 text-align: center;
11 background: #D0EEFF;
12 cursor: pointer;
13 }
14.avatar input {
15 display: inline-block;
16 position: absolute; // 设置input绝对定位，后⾯的⽂字才能往上移动
17 font-size: 12px;
18 top: 0;
19 left: 0;
20 opacity: 0; // 将原来的input变透明
21 z-index: 1;
22 cursor: pointer;
23 }
效果如图：。