input file 美化

2018-09-06 15:37:00 浏览数 (1)

        <input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化。找了很多资料,目前发现以下方式是最简单的美化方式。

1.将file input用label包裹起来,然后给这个label增加我们想要的样式。

2.给input增加样式:

代码语言:javascript复制
style="left:-9999px;position:absolute;"

3.label内增加显示文本

代码语言:javascript复制
<span>上传文件</span>

完整代码:(点击查看demo)

代码语言:javascript复制
<label class="upload_btn" for="file">
    <input type="file" id="file" name="" style="left:-9999px;position:absolute;">
    <span>上传文件</span>
</label>

       这是label标签特性,可将事件传递到目标标签,如不加for属性,默认传递到第一个标签。

0 人点赞