title: Double click instead of single click is required with custom button in IE
body: <p>Please see the following link:</p>
  
  <p><a href="http://jsfiddle.net/HAaFb/55/" rel="nofollow">http://jsfiddle.net/HAaFb/55/</a></p>
  
  <p>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.</p>
  
  <p>HTML: </p>
  
  <pre><code> &lt;div class="custom-input-file"&gt;
          &lt;input type="hidden" value="10000000" name="MAX_FILE_SIZE" /&gt; 
          &lt;input class="input-file" type="file" size="1" onchange="readURL(this);" multiple="multiple" name="files[]" /&gt; 
          Choose files
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> .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;
  }
  </code></pre>