::file-selector-button 疑似要素を使用することで、<input type="file"> 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。
input::file-selector-button {
background-color: #007bff;
color: #fff;
border: 1px solid #007bff;
border-radius: 5px;
padding: 5px 10px;
}::file-selector-button 疑似要素によりボタンをカスタマイズするメリットとして、ファイルドラッグアンドドロップ機能を自分で実装する必要がない点があげられます。ブラウザのデフォルトのファイルアップロードボタンには、あらかじめドラッグアンドドロップ機能が備わっているためです。
ただし、ボタン内部の文字列をカスタマイズすることはできません。この場合にはデフォルトのファイルアップロードボタンを非表示にして、代わりにカスタムボタンを用意する必要があるでしょう。
