file类型的输入框，样式不可修改的解决方法

  1、问题描述

         html中file类型的输入框，在上传文件中经常被用到，但是IE浏览器、火狐、chrome中显示的效果不一样，并且还不可以用css样式表的形式更改对应的样式，在设计是，就会存一些问题。

       IE中显示：

     

       FF中显示：

                        

          

  2、解决思路

       影藏file类型的输入框，新增一个输入框，并将该输入框联动到file类型的输入框中；      

      具体的代码实现如下：

       1、html代码如下：

        <div class="rowInput">
            <label  class="">用户数据:</label>
            <input name="file" type="file" size="50" id="file" class="hidden"/>
            <input name="userWarehouseFile" type="text" id="userWarehouseFile"/>
            <label id="scan" class="Btn" onClick="selectFile()">浏览</label>
        </div>
        <div class="rowInput">
            <label class="inputLabel"></label>
            <button type="submit" class="Btn">导入</button>
        </div>

     2、js代码，用于控制file类型的输入框与新增输入框之间的联动：

        

 <script>
           function selectFile() {
                $("#file").trigger("click");
            }

            $(document).ready(function () {
                $("#file").change(function(){
                    var value = $("#file").val();
                    $("#inventoryFile").val(value);
                });
            });
        </script>

     3、CSS代码，用于控制样式如

         

.rowInput {
    margin: 20px auto;
    width: 450px;
}

.inputLabel {
    display: inline-block;
    width: 120px;
    text-align: right;
    margin-right: 20px;
}

.Btn {
    padding: 6px 12px;
    width: 80px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 2px;
    background-color: #69b755;
    color: #fff;
    margin-bottom: 10px;
}

  4、显示效果如下：

       此时在IE或者FF浏览器中就可以显示自己设置的样式啦，效果如下：