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

 

一、<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--

<div class="inputFileWrapper">
    <label for="inputFile">
        <input type="file" id="inputFile"/>
        <span class="custorm-style">
            <span class="left-button">上传头像</span>
            <span class="right-text" id="rightText"></span>
        </span>
    </label>
</div>

 

 

--js--

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