メインコンテンツへスキップ

カスタムフォームのサンプル

「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。

カスタムファイル選択

カスタム選択のファイル名を表示(単独)

ファイルを選択すると、コントロール部分にファイル名を表示。

取消ボタン付き

インプットグループで参照ボタンの横にファイル取消ボタンを追加。

※注意:v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しない⇒v4.1.3で修正済

カスタム選択のファイル名を表示(複数)

ファイルを選択すると、コントロール部分にカンマ区切りで複数のファイル名を表示。

カスタム選択のファイル名を表示(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で修正済

カスタム選択の画像ファイルのプレビュー

ファイルを選択すると、画像ファイルのみ画像プレビューとファイル名が表示され、画像ファイル以外ではファイル名のみが表示される。

※注意:v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しない⇒v4.1.3で修正済