<input type="file">を頑張ってカスタマイズしました。
See the Pen form_file by d0ne1s (@d0ne1s) on CodePen.
ポイント
-
<input type="file">のデザインは変更できないので、display: noneで非表示にしています。 - 代わりに
labelとlabel:afterで、ボタンと「選択されていません」の文字列を表現しています。 - ファイルが選択された時、
label:afterを非表示にし、代わりに<span>ファイル名</span>を表示するようなjqueryを書きました。 - 同一ページ内に複数あっても動くようになってるはずです。（その場合、各input要素の
idと、labelのforは適宜変更する必要があります。）
2020/04/27追記
jqueryを使わずに書けました。
See the Pen eYpvzLm by d0ne1s (@d0ne1s) on CodePen.
その他
- こういうテンプレートを増やして、いい感じのデザインをパパッと作れるようになりたいです。
- 今回の書き方だとjqueryに依存しているので、時間がある時に生のJavascriptでもかいてみようと思います。