CSS3 と JavaScript を使用してファイル入力要素のスタイルを設定するにはどうすればよいですか?

CSS3 と JavaScript を使用した入力ファイル要素のスタイル設定

ファイル入力などのネイティブ HTML 入力要素のスタイル設定は、困難な場合があります。ただし、CSS3 と JavaScript を使用して外観を強化し、カスタムのファイル選択エクスペリエンスを作成することは可能です。

ファイル入力をスタイリングするための CSS3 オプション

CSS3 は、直接的なスタイルを提供しません。ファイル入力要素のスタイル設定のサポート。ただし、WebKit レンダリング エンジンをサポートするブラウザ (Chrome、Safari など) では、::-webkit-file-upload-button 擬似要素を使用できます。

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

JavaScriptファイル選択のオプション

別のアプローチは、ファイルをトリガーするカスタム div 要素を作成することです。クリックすると入力されます。

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