Safari display: none

Question

Safari just doesn't open element if I hide it using css property display: none! It works in all other browsers though.

Here is my html:

<div id="f" class="btn">Select Image</div>
<input type="file" id="file" style="display:none;" name='athletes_imageid'  value="" /> 

Now in my jquery I want to open the id="file" by clicking on that "Select Image" <div>:

$("#f").click(function() {
    $("#file").click();
});

Answer 1

You can just remove display:none and add the following CSS which is the simplest and most cross-browser way I know to do the trick :

#file {
    height: 0;
    position: absolute;
    width: 0;
}

I don't provide you the jsfiddle as it seems not to support my safari version anyway ;)

Answer 2

Try This

<div id="f" class="btn">Select Image
    <input type="file" class="file" name='athletes_imageid'  value="" />
</div>

for styles

.btn{
    position: relative;
}
.file{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
}