input file 美化
input file 美化
用户2038589
发布于 2018-09-06 07:37:00
发布于 2018-09-06 07:37:00
代码可运行
运行总次数：0
代码可运行
<input type='file'>的默认外观实在难看，绝大多数情况都需要对其美化。找了很多资料，目前发现以下方式是最简单的美化方式。
1.将file input用label包裹起来，然后给这个label增加我们想要的样式。
2.给input增加样式：
style="left:-9999px;position:absolute;"3.label内增加显示文本
<span>上传文件</span>完整代码：(点击查看demo)
<label class="upload_btn" for="file">
<input type="file" id="file" name="" style="left:-9999px;position:absolute;">
<span>上传文件</span>
</label>这是label标签特性，可将事件传递到目标标签，如不加for属性，默认传递到第一个标签。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-09-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
