ブートストラップ4カスタムフォーム

Bootstrap 4には、ブラウザのデフォルトを置き換えることを目的としたカスタマイズされたフォーム要素が付属しています。

カスタム範囲：

デフォルト範囲：

カスタムチェックボックス

カスタムチェックボックスを作成するには、<div>などのコンテナ要素をチェックボックスのクラス.custom-controlとその.custom-checkbox周りにラップします。.custom-control-input次に、type = "checkbox"を使用して入力にを追加します。

ヒント：付随するテキストにラベルを使用する場合は、それに.custom-control-labelクラスを追加します。for属性の値は、チェックボックスのIDと一致する必要があることに注意してください。

例

<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</form>

カスタムスイッチ

カスタムの「トグルスイッチ」を作成するには、<div>などのコンテナ要素をチェックボックスのクラス.custom-controlとその.custom-switch周りにラップします。.custom-control-input次に、クラスをチェックボックスに追加します。

例

<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>

カスタムラジオボタン

カスタムラジオボタンを作成するには、<div>などのコンテナ要素をラジオボタンのクラス.custom-controlとその.custom-radio周りにラップします。.custom-control-input次に、type = "radio"を使用して入力にを追加します。

ヒント：付随するテキストにラベルを使用する場合は、それに.custom-control-labelクラスを追加します。for属性の値は、無線のIDと一致する必要があることに注意してください。

例

<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>

インラインカスタムフォームコントロール

カスタムフォームコントロールを並べて（インラインで）配置する場合は.custom-control-inline、ラッパー/コンテナにを追加します。

例

<form>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>
</form>

カスタム選択メニュー

カスタム選択メニューを作成するには、.custom-selectクラスを<select>要素に追加します。

例

<form>
<select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

カスタム選択メニューサイズ

クラスを使用.custom-select-smして小さな選択メニューを作成し.custom-select-lg、大きなメニューのクラスを作成します。

例

<form>

<select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>


<select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

カスタム範囲

カスタム範囲メニューを作成するには、.custom-rangetype = "<range>"を使用してクラスを入力に追加します。

例

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

カスタムファイルのアップロード

.custom-fileカスタムファイルアップロードを作成するには、type = "file"を使用して入力の周りのクラスでコンテナ要素をラップします。次に、にを追加.custom-file-inputします。

ヒント：付随するテキストにラベルを使用する場合は、それに.custom-file-labelクラスを追加します。for属性の値は、チェックボックスのIDと一致する必要があることに注意してください。

特定のファイルを選択したときにファイルの名前を表示する場合は、jQueryコードも含める必要があることに注意してください。

例

<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

ブートストラップ4チュートリアル

ブートストラップ4グリッド

ブートストラップ4その他

ブートストラップ4Ref

ブートストラップ4カスタムフォーム