Change cursor type on input type="file"

Cross-browser cursor customization

Ensuring browser compatibility

While minimalist, the basic cursor alteration may not cater to all browsers. Here's how to accommodate Chrome that needs its pseudo-elements stroked:

/* Because Chrome loves being special! */
::-webkit-file-upload-button {
  cursor: pointer;
}


Oh, and sorry about IE6. It doesn't honor cursor: pointer;. If somehow you're catering to it, it's time for some JavaScript sorcery!

Masking the default file input

Want more control? Hide the classic file input and put a custom element in charge:

/* Making a cursor-friendly file uploader */
.custom-file-upload {
  cursor: pointer; /* Pointer is our friend! */
  position: relative; /* Keeping stuff tidy. */
  display: inline-block;
}

/* Playing hide and seek with the file input */
.custom-file-upload input[type='file'] {
  opacity: 0; /* Invisible but not gone. */
  position: absolute;
  overflow: hidden;
  width: 0.1px; height: 0.1px; /* Practically non-existent. */
  z-index: -1; /* Hiding under the covers. */
}


Your HTML needs this beautiful monogamy:

<label class="custom-file-upload">
  <input type="file"/>
  Upload File
</label>


Now, that's a pointer-friendly file uploader!

User experience matters!

When it comes to UX, clarity is key. A pointer cursor on an <input type="file"> indicates its clickability. Enhancing usability, even by a single cursor swap, goes a long way.

Making a custom button

Put a costume on your file uploader with a styled element:

<label for="file-upload" class="custom-file-upload">
    <img src="button-image.png" style="cursor: pointer;"/> Upload File
</label>
<input id="file-upload" type="file" style="display: none;"/>


Custom fancy button plus a hidden file input equals style plus substance. Clicking the image triggers the file input, maintaining a pleasing aesthetic with an uninterrupted user experience.

Thoughts on browser specifics

Browser policies

Browser vendors like to keep us on our toes (oooh, the diversity!). Be aware of how different browsers handle file inputs and cursors. Styles applied on one might need a tweak on another.

Inline styles to the rescue

CSS selectors not working as expected? Apply styles inline to force them onto the element. Keep in mind, you're now dealing with a different specificity level, and it's less maintainable:

<input type="file" style="cursor: pointer;"/>
