Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を推奨。
セレクター Widely available

::file-selector-button

::file-selector-button は <input type="file"> 内のボタン部分を選択する標準化された擬似要素。従来のベンダープレフィックス付き擬似要素を置き換え、ファイル入力ボタンのデザインを統一的にカスタマイズできる。

フォームスタイリング

概要

::file-selector-button は <input type="file"> 内のボタン部分を選択する標準化された擬似要素。従来のベンダープレフィックス付き擬似要素を置き換え、ファイル入力ボタンのデザインを統一的にカスタマイズできる。

対応ブラウザ

デスクトップ

Chrome 89+
Edge 89+
Safari 14.1+
Firefox 82+

モバイル

Chrome Android 89+
Safari iOS 14.5+
Firefox Android 82+

基本構文

CSS 
input[type="file"]::file-selector-button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

input[type="file"]::file-selector-button:hover {
  background: #1d4ed8;
}

実務での使いどころ

  • ファイルアップロードUIの統一

    デザインシステムに合わせたファイル選択ボタンのスタイリング。

注意点

  • ボタン以外のテキスト部分（ファイル名表示）は別途スタイリングが必要。
  • appearance: none を組み合わせるとレイアウトが崩れる場合がある。

アクセシビリティ

  • ボタンのコントラスト比を WCAG AA 基準（4.5:1）以上に保つ。

参考リンク