title: How to change input file button size?
body: <p>I am working with styling input file with opacity method - real input file button has opacity 0 and in front of it, using z-index is another input (with opacity: 1). Unfortunatelly I want my visible button to be squared picture (width:height: 1:1) - and unvisible input file is always rectangular (input box and select box with aspect ratio about 1:10). Question is - how to resize input file button to be squared (or any size) to make whole visible button area clickable (because only clicking invisible button causes opening browser window). Now only part of on visible button is "clickable".</p>
  
  <p>CSS:</p>
  
  <pre><code>   &lt;style type="text/css"&gt;
     .upload {
          position:relative;
      width:100px;
     }
  
     .realupload {
      position:absolute;
      top:0;
      right:0;
      opacity:0.5;
      -moz-opacity:0.5;
      filter:alpha(opacity:0.5);
      z-index:2;
      width:100px;
     }
  
     form .fakeupload {
      background: url(images/bglines.png);
     }
  
     form .fakeupload input {
      width:0px;
     }
  
     &lt;/style&gt;
  </code></pre>
  
  <p>And html:</p>
  
  <pre><code>&lt;form&gt;
     &lt;li class="upload"&gt;
      &lt;div class="fakeupload"&gt;
          &lt;input type="text" name="fakeupload" style="opacity: 0;"/&gt;
      &lt;/div&gt;
      &lt;input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" /&gt;
     &lt;/li&gt;
     &lt;/form&gt;
  </code></pre>