Question

有人知道如何在input type="file"隐藏输入并离开按钮吗？

这可能吗？

Answer 1

从历史上看，文件输入一直是HTML样式方面的一个棘手问题。但是，有一些解决方法。看一下使用一些自定义元素隐藏输入的a jQuery plugin。样式化和自定义这些元素要容易得多。

This也是关于这个主题的好文章。

Answer 2

AFAIK这是不可能的。以下some techniques用于设置此字段的样式，该字段隐藏原始字段并将其替换为一些标准输入，然后使用javascript来反映原始字段。

Answer 3

使用剪辑属性。绝对定位是必需的，因此添加一个相对定位的容器。

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0px 222px 22px 145px);  }

Webkit浏览器需要不同的坐标：

* > /**/ input[type="file"], x:-webkit-any-link { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0px 86px 22px 0px);  }

Answer 4

<script type="text/javascript">
    $(function () {
        $('#btn-upload').click(function (e) {
            e.preventDefault();
            $('#file').click();
        });
    });
</script>

<style type="text/css">
    #file { display:none; } 
</style>

<div>
    <input type="file" id="file" name="file" />
    <button type="button" id="btn-upload">Image</button>
</div>

输入TYPE =“文件”隐藏输入并离开按钮？

4 个答案: