Input TYPE="File" hide the input and leave the button?

Question

Does anyone know how to hide the input in a input type="file" and leave the button?

Is this possible?

Answer 1

Historically, the file input has been a thorn in the side of HTML styling. There are some workarounds for it, however. Take a look at a jQuery plugin which obscures the input with some custom elements. Styling and customizing those elements is much easier.

This is a good article on the subject as well.

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

AFAIK this is not possible. Here are some techniques to style this field which hide the original field and replace it with some standard input which is then using javascript to reflect the original.

Answer 4

Use the clip property. Absolute positioning is required, so add a relatively positioned container.

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

Webkit browsers require different coordinates:

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