title: CSS Cursor Not Working in Chrome
body: <p>I'm using <a href="https://allinworld99.blogspot.com/2015/01/php-profile-image-upload-script-change.html" rel="nofollow noreferrer">this script</a> to power a profile image upload function on my site. It displays an image with an overlay banner across the bottom:</p>
  
  <p><a href="https://i.stack.imgur.com/IHa7A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IHa7A.jpg" alt="capture"></a></p>
  
  <p>When mousing over that overlay banner, the CSS "cursor: pointer" declaration works fine in the browsers I've tested <em>except</em> for Chrome. With Chrome for both Windows and Mac, the pointer cursor only appears on the edges of that overlay. When the cursor hovers over the "Change Photo" text, the cursor reverts back to arrow. </p>
  
  <p>Here's the relevant HTML:</p>
  
  <pre><code>&lt;div id="imgChange"&gt;
    Change Photo
    &lt;input type="file" accept="image/*" name="image_upload_file" id="image_upload_file"&gt;
    &lt;input type="hidden" name="user_id" id="user_id" value="16"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the relevant CSS:</p>
  
  <pre><code>#imgChange input[type="file"] {
    cursor: pointer;
    }
  </code></pre>
  
  <p>I've put together a page demonstrating the issue <a href="http://dev.linkstac.kr/cursor_test.html" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Anyone know what the issue might be?</p>