input file中修改默认样式的简单方法

云，

于 2019-12-13 12:19:17 发布

阅读量1.1k

点赞数 7

CC 4.0 BY-SA版权

文章标签： html css js javascript

本文链接：https://blog.youkuaiyun.com/axiebuzhen/article/details/103524188

看过网上很多修改input file 文件上传的例子，真的非常麻烦，不仅css写一大堆，还要写一些js代码，或者是引入bootstrasp的样式。

其实只要用到html中label标签的for属性就可以达到修改input file的功能。
代码如下：

<label for="file_load" style="display:block;background: #1CB541;color:white;width: 100px;height: 35px;line-height: 35px;font-size: 14px;text-align: center;">更换头像</label>
<input id="file_load" type="file" style="display:none">

在这里插入图片描述