How Can I Style File Input Elements with CSS3 and JavaScript?

Styling Input File Elements with CSS3 and JavaScript

Styling native HTML input elements, such as the file input, can be challenging. However, it is possible to enhance their appearance and create a custom file selection experience using CSS3 and JavaScript.

CSS3 Option for Styling File Input

CSS3 does not provide direct support for styling file input elements. However, it is possible to use the ::-webkit-file-upload-button pseudo-element in browsers that support the WebKit rendering engine (e.g., Chrome, Safari).

::-webkit-file-upload-button {
  background-color: #00f;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 10px;
}

JavaScript Option for File Selection

An alternative approach is to create a custom div element that triggers the file input when clicked.

<div><pre class="brush:php;toolbar:false">document.getElementById('file-button').addEventListener('click', () => {
  document.getElementById('file-input').click();
});

document.getElementById('file-input').addEventListener('change', () => {
  const filename = document.getElementById('file-input').value.split('\').pop();
  document.getElementById('file-button').textContent = filename;
});