note.parts-tips.com

てがろぐの投稿フォームにも実装されている「ファイル選択」フォーム。このフォームの「ファイルを選択」というボタン（ブラウザによって「選択」など名称が異なります）は、CSSでスタイルの装飾が可能です。
以下はサンプルコードです。

<!-- HTML記述 -->

<input type="file" class="btn_custom">

/* CSS記述 */

.btn_custom::file-selector-button {

  padding: 0.25em;

  color: #fff;

  background-color: #000;

  border: 1px solid #000;

  border-radius: 5px;

}



.btn_custom:hover::file-selector-button {

  color: #000;

  background-color: #ccc;

}

ファイル選択フォーム（<input type="file">）に対して、擬似要素である::file-selector-buttonを追加することで、そのスタイルを変更することが可能です。

以下は参考情報です。

• ::file-selector-button - CSS: カスケーディングスタイルシート | MDN
• CSS selector: `::file-selector-button` | Can I use... Support tables for HTML5, CSS3, etc