input type="file"在各个浏览器下的默认样式，以及修改自定义样式

最新推荐文章于 2023-09-09 22:45:42 发布

weixin_30525825

最新推荐文章于 2023-09-09 22:45:42 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hamsterPP/p/5804512.html

本文介绍如何自定义HTML中<input type=file>元素的样式，并提供了一个具体的示例，展示了如何通过CSS和JavaScript实现文件选择按钮的美化及文件名的显示。

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

一、<input type="file"/>在各个浏览器中的默认样式：

系统	浏览器	点击效果
mac	google	点击按钮和输入框都可以打开文件夹
mac	firfox	点击按钮和输入框都可以打开文件夹
mac	safari	点击按钮和输入框都可以打开文件夹
win10	google	点击按钮和输入框都可以打开文件夹
win10	firefox	点击按钮和输入框都可以打开文件夹
win10	edge	点击按钮和输入框都可以打开文件夹
win10	ie11	点击按钮和输入框都可以打开文件夹
win10	ie11仿真ie10\9\8\7\5	点击按钮可以打开文件夹，输入框不可以打开文件夹

二、修改成自己的样式

目标样式如下：

上传头像

当上传文件后，会在右侧显示文件名

点击，在新窗口打开演示版：www.jusctice.cn/u1 （基础演示用，没有做更多判断容错处理，所以别传太大的文件）

具体代码：

-- css --

        .inputFileWrapper label{
            display: block;
            float: left;
            position: relative;
        }
        .inputFileWrapper input[type="file"]{
            position: absolute;
            width: 1px;
            height: 1px;
            clip:rect(0,0,0,0);
        }
        .inputFileWrapper .custorm-style{
            display: block;
            width: 390px;
            height: 50px;
        }
        .inputFileWrapper .custorm-style .left-button{
            width: 80px;
            line-height: 50px;
            background: #008ac7;
            color: #fff;
            display: block;
            text-align: center;
            float: left;
        }
        .inputFileWrapper .custorm-style .right-text{
            width: 300px;
            height: 40px;
            line-height: 50px;
            display: block;
            float: right;
            padding: 4px;
            border: 1px solid #008ac7;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

--html--

1 <div class="inputFileWrapper">
2     <label for="inputFile">
3         <input type="file" id="inputFile"/>
4         <span class="custorm-style">
5             <span class="left-button">上传头像</span>
6             <span class="right-text" id="rightText"></span>
7         </span>
8     </label>
9 </div>

--js--

1 <script src="js/jquery-1.11.2-min.js"></script>
2 <script>
3     var fileBtn = $("input[type=file]");
4     fileBtn.on("change", function(){
5         var index = $(this).val().lastIndexOf("\\");
6         var sFileName = $(this).val().substr((index+1));
7         $("#rightText").html(sFileName);
8     });
9 </script>