【CSS】「ファイルを選択」ボタン(input[type="file"]) のスタイル変更は疑似要素でできます！！

はじめに

ウェブページのフォームを作成していると、コヤツ👇のスタイル変更に困ることありますよね。

この「ファイルを選択」ボタンのスタイルは簡単に変えることができないため、ネット検索で検索するとinputタグを非表示にしlabelタグやbuttonタグを使って代わりのボタンUIを作成する方法が山のように出てきます。
しかし実はそんな回りくどいことをしなくても、ある程度のスタイル変更であればinputタグとCSSだけで完結させる方法がちゃんと用意されています。

解決方法

CSSの疑似要素::file-selector-buttonまたは::-webkit-file-upload-button（古いWebKit/Blink互換のブラウザ用）を使用することで「ファイルを選択」ボタンにスタイルを当てることができます。

実装例

例えば、以下のようなスタイル変更が可能です。

input[type='file'] {
  color: rgb(31, 41, 55);
  cursor: pointer;
  border: 1px solid rgb(191, 194, 199);
  border-radius: 0.375rem;
  padding-right: 0.5rem;
  width: 24rem;
}

::file-selector-button,
::-webkit-file-upload-button {
  background-color: rgb(209, 213, 219);
  color: rgb(31, 41, 55);
  border: none;
  cursor: pointer;
  border-right: 1px solid rgb(191, 194, 199);
  padding: 0.25rem 1rem;
  margin-right: 1rem;
}

↓

Tailwind CSS の場合

Tailwind CSSを使用している場合は file modifier を使用することでより簡単にスタイル変更できます。

参考