Triggering click with jquery on hidden input-file tag

Question

I am testing this idea of using a div on top of an invisible `` so I can make a fancy file uploading button. I have seen some code around but was somewhat complicated. I thought of trying this idea of using jQuery to trigger the click of the input tag from its div container Html: ```

Click Me!

``` Javascript: ``` $(document).ready( function() { $('#container').click( function() { $('#file')[0].click(); }) }); ``` Although the code runs OK on Chrome and IE, it does not run on Safari and it has a funny problem with Firefox: it triggers the click twice! Any idea why this is so? jQuery is supposed to be cross-platform and I am puzzled. Here is the fiddle http://jsfiddle.net/kostasd/C4sCs/1/ Thanks in advance for any help! Kostas

Accepted Answer

The different Possible Solutions which I tried are

- Using Visiblity:hidden; width:1px; for the File input element.

The jsfiddle for it is as follow http://jsfiddle.net/C4sCs/36/

Using only the Css to call the file input click and not using jquery at all

```
#container {
border:1px solid #b0b0b0;
display: inline-block;
position:relative;
overflow:hidden;
cursor:pointer;
}
#file {  
position:absolute;
top:0;
opacity:0;
display:block;
}
```

http://jsfiddle.net/C4sCs/42/

Triggering click with jquery on hidden input-file tag

Solution

Problem