<input type="file">のカスタマイズ方法

<input type="file">のボタンをデフォルト以外にものにするための完全に自分用のメモです。

appearanceプロパティ

要件次第なところはあるのですが、<input type="file">を記述すると 「ファイル選択」のボタンの横にファイルがアップされていない場合は「選択されていません」、 ファイルがアップされたらファイルのファイル名が記述されるテキスト部分が必ず付きます。

そのテキストを無くすのであればopacity: 0;を指定して、 <input type="file">を透明にしてspan要素とかで別の要素にオリジナルなものを指定すればなんとかなりますが、 そのテキストを消さないという場合であると<input type="file">のカスタマイズは容易ではありません。

-webkit-file-upload-button疑似要素

容易ではないとはいえどWebKitが実装している-webkit-file-upload-button疑似要素を使うと<input type="file">のボタンだけいい感じにカスタマイズすることができます。しかし、使えるのがWebKit系のみですのでスマホでは有効であってもPCサイトでは中々できないというのが現状です。

下記にプレビューを用意しました。WebKit系のブラウザで確認してください。ソレ以外だと残念な結果になっています。

プレビュー

See the Pen How to customize by Minoru Hayakawa (@e-river) on CodePen.