关于input type = "file" 样式的美化

最新推荐文章于 2025-05-08 11:48:49 发布

平天定海

最新推荐文章于 2025-05-08 11:48:49 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： input type="file" 样式文件上传按钮

本文链接：https://blog.youkuaiyun.com/llz199607/article/details/82735221

3 篇文章

订阅专栏

本文介绍了一种使用CSS和JS（jQuery）结合的方式，来美化HTML中的文件上传按钮(<input type=file>)的方法。通过隐藏原始的文件选择框，并用自定义的按钮替代，再借助JS触发文件选择事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，<input type = "file">的默认样式是这样的：

默认的样式直接放到网页中总觉得不太协调，于是我在网上查找它的美化方法。大方向上基本是用CSS美化，但细化到具体的美化方式则多种多样。在眼花缭乱之下找到了这篇文章：修改 input type=file 的样式的最简单方法

什么？最简单方法？~~我来看一看你有多简单。~~

1、重写一个新的样式；

2、将默认的样式设为display:none，即设为不可见；

3、在js里调用：当点击新样式的时候，调用这个input的点击事件。

这里我和该文作者一样，使用css+js（jquery）的方式美化。

HTML部分使用一个div，把一个<button>和<input type = "file">包裹起来：

    <div id="button">
        <button id="upload">上传图片</button> 
        <input type="file" id="fileul">
    </div>

css部分：

#fileul{
     display: none;
}

js部分这里我同样使用了jquery：

$(document).ready(function(){
   $('#upload').click(function(){ 
       $('#fileul').click()
   });
});

最终效果呈现为一个按钮，点击后触发对input的点击事件，弹出文件选择的对话框。