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

::file-selector-button

::file-selector-button は CSS の擬似要素で、<input> 要素の type="file" のボタンを表します。

フォームスタイリング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:file-selector-button
89
89
82
14.1
89
14.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: ::-webkit-file-upload-button (1)
注釈 3件
対応条件
  • 以前は別名で対応していました: ::-webkit-file-upload-button (79)
  • 以前は別名で対応していました: ::-ms-browse (12)
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: ::-webkit-file-upload-button (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: ::-webkit-file-upload-button (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: ::-webkit-file-upload-button (1)

基本構文

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

ライブデモ

Custom styles

::file-selector-button customstyle demo.

プレビュー全画面表示

rounded only. existsdesign

::file-selector-button rounded only. existsdesign demo.

プレビュー全画面表示

outlinestyle

::file-selector-button outlinestyle demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク