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

  1、问题描述

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

       IE中显示：

     

       FF中显示：

                        

          

  2、解决思路

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

      具体的代码实现如下：

       1、html代码如下：

        

            用户数据:
            
            
            浏览
        
        

            
            导入
        

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

        

     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浏览器中就可以显示自己设置的样式啦，效果如下：