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

来源：互联网发布：js下一个兄弟节点编辑：程序博客网时间：2024/06/11 17:49

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

0 0