您的位置: 首页  >  IT文章  >  input type="file"在各个浏览器下的默认样式，以及修改自定义样式

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

分类: IT文章 • 2025-01-03 12:36:31

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

系统 浏览器 样式效果 点击效果
mac google input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮和输入框都可以打开文件夹
mac firfox input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮和输入框都可以打开文件夹
mac safari input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 google input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 firefox input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 edge input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 ie11 input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 ie11仿真ie109875 input type="file"在各个浏览器下的默认样式，以及修改自定义样式 点击按钮可以打开文件夹，输入框不可以打开文件夹

 二、修改成自己的样式

目标样式如下：

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

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

 点击，在新窗口打开演示版：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>

相关推荐