title: The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers
body: <p>i have CSS code that does not really work on webkit browsers such as  safari and chrome</p>
  
  <p>if you want live example here it is <a href="http://jsfiddle.net/mnjKX/1/" rel="noreferrer">http://jsfiddle.net/mnjKX/1/</a></p>
  
  <p>i have this CSS code</p>
  
  <pre><code>.file-wrapper {
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      position: relative;
  }
  .file-wrapper input {
      cursor: pointer;
      font-size: 100px;
      height: 100%;
      filter: alpha(opacity=1);
      -moz-opacity: 0.01;
      opacity: 0.01;
      position: absolute;
      right: 0;
      top: 0;
  }
  .file-wrapper .button {
      background: #79130e;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      margin-right: 5px;
      padding: 4px 18px;
      text-transform: uppercase;
  }
  </code></pre>
  
  <p>and this HTML code :</p>
  
  <pre><code>&lt;span class="file-wrapper"&gt;
     &lt;input type="file" name="photo" id="photo" /&gt;
     &lt;span class="button"&gt;Choose a Photo&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>this code shows  hidden input file tag ,
  the problem here is that the cursor:pointer is does not work on webkit browsers ,</p>
  
  <p>how can i solve it or bypass / overtake this ?</p>