title: Cross-browser custom styling for file upload button
body: <p>I'm trying to style a file upload button to my personal preferences, but I couldn't find any really solid ways to do this without JS. I did find <a href="https://stackoverflow.com/q/3226167/1256925">two</a> <a href="https://stackoverflow.com/q/3606876/1256925">other</a> questions about this subject, but the answers there either involved JavaScript, or suggested <a href="http://www.quirksmode.org/dom/inputfile.html" rel="noreferrer">Quirksmode's approach</a>.</p>
  
  <p>My major issue with this Quirksmode's approach is that the file button will still have the browser-defined dimensions, so it won't automatically adjust to whatever's used as button that's placed below it. I've made some code, based on it, but it will just take up the space the file button would normally take up, so it won't at all fill the parent div like I want it to.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="myLabel"&gt;
      &lt;input type="file"/&gt;
      &lt;span&gt;My Label&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.myLabel {
      position: relative;
  }
  .myLabel input {
      position: absolute;
      z-index: 2;
      opacity: 0;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/KY42f/1/" rel="noreferrer"><strong>This fiddle</strong></a> demonstrates how this approach is quite flawed. In Chrome, clicking the <code>!!</code> below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn't take up the correct areas of the button.</p>
  
  <p>Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little 'hacky' coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?</p>