メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
Check
in English

フローティング ラベル

入力フィールドに浮かぶ美しくシンプルなフォーム ラベルを作成します。

このページでは

例

<input class="form-control">と<label>要素のペアをラップして.form-floating、Bootstrap のテキスト フォーム フィールドでフローティング ラベルを有効にします。CSS のみのフローティング ラベルのメソッドは疑似要素を使用するplaceholderため、それぞれに が必要です。また、兄弟セレクター (例: ) を使用できるように、 を最初に指定する必要があることに注意してください。<input>:placeholder-shown<input>~

html 
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

がvalue既に定義されている場合、<label>s は自動的に浮動位置に調整されます。

html 
<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

フォーム検証スタイルも期待どおりに機能します。

html 
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

テキストエリア

デフォルトでは、<textarea>s with.form-controlは s と同じ高さになります<input>。

html 
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

にカスタムの高さを設定するには、属性<textarea>を使用しないでください。rows代わりに、height(インラインまたはカスタム CSS を介して) 明示的に設定します。

html 
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

セレクト

以外では.form-control、フローティング ラベルは でのみ使用できます.form-select。これらは同じように機能しますが、 とは異なり<input>、常に<label>フロート状態で表示されます。と の選択はサポートされていません。sizemultiple

html 
<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

読み取り専用の平文

フローティング ラベルは もサポートしています。これは、ページ レイアウトに影響を与えることなく.form-control-plaintext、編集可能な値からプレーンテキストの値に切り替えるのに役立ちます。<input>

html 
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

入力グループ

フローティング ラベルもサポートして.input-groupいます。

@
html 
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

.input-groupを.form-floatingフォーム検証とともに使用する場合、-feedbackは の外側に配置する必要があります.form-floatingが、 の内側に配置する必要があり.input-groupます。これは、JavaScript を使用してフィードバックを表示する必要があることを意味します。

@
ユーザー名を選択してください。
html 
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

レイアウト

Bootstrap グリッド システムを使用する場合は、必ずフォーム要素を列クラス内に配置してください。

html 
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

サス

変数

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;