Styling an input type="file" button

Maintaining browser compatibility and user interaction

The browser compatibility saga continues! Different browsers render file inputs in their own way. The above approach helps maintain a consistent look and user experience across multiple browsers.

We can spice things up a bit more, using CSS pseudo-elements like ::file-selector-button to directly style the button of the file input in modern browsers.

Speaking of interactions (no, not that awkward conversation with your boss), add some JavaScript to change the label text based on the selected file name.

/* Who's that file? It's ... */
const fileInput = document.getElementById('file-upload');
const fileLabel = document.querySelector('.custom-file-upload');

fileInput.onchange = () => {
  /* Suddenly reveal the file name like a magician pulling a rabbit out of a hat */
  fileLabel.textContent = fileInput.files.length ? fileInput.files[0].name : 'Choose a file';
};


Add a dash of CSS for hover effects and transitions to make the button interaction smooth like a good pickup line.

/* File input button: "Are you a magician? Because whenever I look at you, everyone else disappears." */
.custom-file-upload:hover {
  background-color: #e8e8e8;
  transition: background-color 0.2s;
}


Handle form submissions with JavaScript and event.preventDefault(). This can be handy when you need some control before surrendering the form data to the server.

document.querySelector('form').onsubmit = (event) => {
  /* Yelling "Freeze!" at your form submission */
  event.preventDefault();

  /* Do all the checks here. If it passes, call it Marvel because it's going into the endgame now */
};


Advanced styling and accessibility tips

Control input sizing

Need to control the size of the input field? Use the size attribute. It sets the width of the input to a specific number of characters.

<input type="file" id="file-upload" style="display: none;" size="0" />


Ensure accessibility

In the words of Uncle Sam, we want "accessibility for all!". Use ARIA attributes or offscreen techniques to keep the input accessible for screen readers.

/* The hiding-in-plain-sight technique for our secret agent "file input" */
input[type="file"] {
  opacity: 0.01;
  position: absolute;
  left: -999em;
}


Tackling browser quirks

Not all browsers are alike. Some are more particular than others (yes, we're looking at you, IE!). Browser-specific pseudo-elements like ::-webkit-file-upload-button can give you extra control. Nonetheless, do check your solution across different browsers.

Validation and hidden inputs

If a hidden input falls in the form, does it make a sound? Well, some validation tools might ignore inputs hidden with display: none. Validate such inputs using JavaScript or use other CSS methods to hide them that don't affect their detectability.