はじめに テンプレート デフォルトの ファイル インプット カスタム・ファイル・インプット bs-custom-file-input を使う ラベルの変更 取消ボタン 取消イベントのマルチブラウザ化 まとめ はじめに Bootstrap の Forms コンポーネントは、デフォルトだと file input だけ統一感がなく残念な感じです。 custom-file-input を使って以下のような file input を作る手順を見ていきます。 なお、ここでは Bootstrap 4 を使います。 テンプレート 以下のような html を出発点とします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
![Bootstrap のファイル選択を custom-file-input できれいにする - A Memorandum](https://cdn-ak-scissors.b.st-hatena.com/image/square/c99028a911332783c9c978ced5022e91d0d394a8/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FN%2FNaotsugu%2F20191118%2F20191118195752.png)