input file 美化

        <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属性，默认传递到第一个标签。

转载于:https://www.cnblogs.com/wuyoucao/p/7505162.html