Input TYPE = "File" скрыть ввод и оставить кнопку?

Question

Кто-нибудь знает, как скрыть ввод в input type="file" и оставить кнопку?

Возможно ли это?

Answer 1

Исторически сложилось так, что ввод файлов был проблемой в стиле HTML. Однако для этого есть некоторые обходные пути. Взгляните на плагин jQuery , который скрывает ввод с помощью некоторых пользовательских элементов. Стилизовать и настроить эти элементы намного проще.

Это также хорошая статья на эту тему.

Answer 2

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

Answer 3

Используйте свойство clip.Требуется абсолютное позиционирование, поэтому добавьте относительно позиционированный контейнер.

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

AFAIK это невозможно. Вот некоторые методы для стилизации этого поля, которые скрывают исходное поле и заменяют его стандартным вводом, который затем использует javascript для отражения оригинала.