0

Please see the following link:

http://jsfiddle.net/HAaFb/55/

Not sure why this requires a double click and how can it be modified to work with a single click. The problem happens only in IE it works with Mozilla.

HTML: 

 <div class="custom-input-file">
        <input type="hidden" value="10000000" name="MAX_FILE_SIZE" /> 
        <input class="input-file" type="file" size="1" onchange="readURL(this);" multiple="multiple" name="files[]" /> 
        Choose files
 </div>

CSS

 .custom-input-file .input-file {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 10000px;
    border: 10000px solid transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    right: -1000px;
    top: -1000px;
    cursor: pointer;
}



 .custom-input-file {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

 .custom-input-file {
  background-color:yellow;
    width: 229px;
    height: 29px;
    font-family: "Tw Cen MT";
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 7px;
    margin: 0 auto;
    color:black;
}
Athanatos
  • 1,089
  • 6
  • 15
  • 32
  • It worked fine for me in IE 9. Only one click. – MiniRagnarok Jul 22 '13 at 20:28
  • I don't have a solution, but I **do** experience the same issue in IE10. Single click doesn't work, double click does, every time. – Jason P Jul 22 '13 at 20:31
  • http://stackoverflow.com/questions/17195798/ie-requires-double-click-with-custom-button – MiniRagnarok Jul 22 '13 at 20:32
  • thanks MiniRagnarok but according to the poster "the double click is happening on the text portion of the file upload" for me is happening for the whole button , also no clear (code) solution / workaround is provided in the post so I will keep this fiddle open for now as I think it might be useful in general when/if this is resolved. – Athanatos Jul 22 '13 at 20:37
  • 1
    @Athanatos Does the [fiddle](http://jsfiddle.net/plowdawg/HJGFh/) work for you (I don't have IE10 installed on this machine)? – MiniRagnarok Jul 22 '13 at 20:39
  • yes this is a nice workaround thanks, You are using the onclick event on the div so when this is clicked you are triggering a click on the file input. Curious to see if there is another way to get it to work directly using the custom input and why this happens only in IE10. – Athanatos Jul 22 '13 at 20:46
  • @Athanatos I didn't make the fiddle. It's from the link I posted. Glad it worked though. – MiniRagnarok Jul 22 '13 at 20:47

1 Answers1

3

I won't go into the code in the fiddle, as I assume is not exactly what you have on your html (open divs for instance).

Try removing border: 10000px solid transparent;

user2513484
  • 304
  • 1
  • 5