カスタムフォームのサンプル
「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。
カスタムファイル選択
カスタム選択のファイル名を表示(単独)
ファイルを選択すると、コントロール部分にファイル名を表示。
See the Pen Bootstrap4 custom-file ファイル名表示 by cccabinet (@cccabinet) on CodePen.
取消ボタン付き
インプットグループで参照ボタンの横にファイル取消ボタンを追加。
※注意:v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しない⇒v4.1.3で修正済
See the Pen Bootstrap4 custom-file reset 取消ボタン付き by cccabinet (@cccabinet) on CodePen.
カスタム選択のファイル名を表示(複数)
ファイルを選択すると、コントロール部分にカンマ区切りで複数のファイル名を表示。
See the Pen Bootstrap4 custom-file mutiple ファイル名表示 by cccabinet (@cccabinet) on CodePen.
カスタム選択のファイル名を表示(bs-custom-file-inputを使用)v4.4.0新設
公式サイトで推奨しているbs-custom-file-inputを導入(複数ファイルにも対応)。
See the Pen Bootstrap4 custom-file mutiple ファイル名表示 by cccabinet (@cccabinet) on CodePen.
カスタム選択の複数ファイル名をリスト表示
ファイルを選択すると、コントロールの下にファイル名とサイズをリスト表示。
※注意:v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しない⇒v4.1.3で修正済
See the Pen Bootstrap4 custom-file mutiple リスト表示 by cccabinet (@cccabinet) on CodePen.
カスタム選択の画像ファイルのプレビュー
ファイルを選択すると、画像ファイルのみ画像プレビューとファイル名が表示され、画像ファイル以外ではファイル名のみが表示される。
※注意:v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しない⇒v4.1.3で修正済
See the Pen Bootstrap4 custom-file mutiple 画像プレビュー by cccabinet (@cccabinet) on CodePen.