search

Lenny-Hu / note

blog
5 stars 1 forks source link

WEB表单美化方案 #87

Open Lenny-Hu opened 4 years ago

Lenny-Hu commented 4 years ago

文件选择框

简单快速

使用lable包裹input:file，配置for和id属性，将input隐藏,可实现点击label弹出选择框

<label for="form-file" class="f-cb f-db">
<span class="name f-fl f-tar">照片</span>
<div class="f-fl ipt ipt-file f-csp f-pr f-toe">
{{form.file || '未选择任何文件'}}
</div>
<input id="form-file" class="f-dn" name="file" type="file" @change="onSelectedFile($event)" accept="image/png,image/jpeg">
</label>