Question

I have this code over here

.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;
}

<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <span class="button">Choose a Photo</span>
</span>

in Safari and Google chrome browsers it does not show the cursor as pointer, so what’s wrong?

Answer 1

Styling a <input type='file'> can be hit-and-miss.

A lot of functionality is removed from these fields, due to security issues, including some CSS styling functionality. This is because if a file input field can be styled to look like something else, it may be possible for a malicious site to trick users into uploading files without intending to.

The exact features which are disabled for file input fields varies between browsers, so my guess is that the cursor style is disabled for these fields in Webkit-based browsers but not in other browsers.

I can see in your Fiddle that you’ve made quite an effort to get around some of these restrictions by overlaying a button on top of your file input field, but my guess is that the cursor restriction is going to be harder to work around.

If this is the case, then it is something you are just going to have to live with.