input-group

bootstrap5.css

bootstrap5.css
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
bootstrap5.css
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
bootstrap5.css
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}
bootstrap5.css
.input-group .btn {
  position: relative;
  z-index: 2;
}
bootstrap5.css
.input-group .btn:focus {
  z-index: 3;
}
bootstrap5.css
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
bootstrap5.css
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 1.75rem;
}
bootstrap5.css
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.btn-toolbar .input-group {
  width: auto;
}

html bootstrap5 Sample

オプション選択:form-selectとinput-group-text


  <div class="input-group mb-3">
    <label class="input-group-text" for="inputGroupSelect01">オプション選択</label>
    <select class="form-select" id="inputGroupSelect01">
      <option selected>オプションを選択してください...</option>
      <option value="1">オプション1</option>
      <option value="2">オプション2</option>
      <option value="3">オプション3</option>
    </select>
  </div>

フォームレイアウトにrow自動サイズ調整カラム:rowとcol-auto


  <!-- flexbox ユーティリティを使用してコンテンツを垂直方向にセンタリングし、 -->
  <!-- .col を .col-auto に変更して、カラムが必要なだけのスペースを占有する。 -->
  <!-- カラムのサイズは内容に基づいてデバイス等により自動的に決定されます -->
  <!-- bootstrap5では、form-rowからrowに変更 -->
  <div class="row align-items-center">
    <div class="col-auto">
      <!-- labelはvisually-hidden -->
      <label class="visually-hidden" for="inputName">氏名</label>
      <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
    </div>
    <div class="col-auto">
      <div class="input-group mb-2">
        <label class="visually-hidden" for="inputUsername">ユーザーネーム</label>
        <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input type="checkbox" class="form-check-input" id="check">
        <label class="form-check-label" for="check"> チェックする </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">送信</button>
    </div>
  </div>

インラインのフォーム:form-inline


@
  <!-- formにclassを設定する -->
  <form class="form-inline">
    <label class="visually-hidden" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="visually-hidden" for="username">ユーザーネーム</label>
    <!-- input-groupinput-group-textを設定して、テキスト文字と混在させる -->
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>

入力コントロールの前にアドオンを配置:input-group-text


@
  <div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon">@</span>
    <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名">
  </div>

入力コントロールの前後にアドオンを配置:input-group-text


合計
  <!-- 固定の文字列を書いておいて、その中身を入力してもらう -->
  <div class="input-group mb-3">
    <span class="input-group-text">合計</span>
    <input type="text" class="form-control" aria-label="金額">
    <span class="input-group-text">円</span>
  </div>

折り返さない:flex-nowrap


@
  <div class="input-group flex-nowrap">
    <span class="input-group-text" id="addon-wrapping">@
      <input type="text" class="form-control" placeholder="Username" aria-label="Username"
        aria-describedby="addon-wrapping">
  </div>

入力グループのサイズ調整/中デフォルト:input-group


Default
  <!-- 標準サイズの入力グループ -->
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
    <input type="text" class="form-control" aria-label="Default">
  </div>

入力グループのサイズ調整/小: input-group-sm


Small
  <!-- 小サイズの入力グループ -->
  <div class="input-group input-group-sm mb-3">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    <input type="text" class="form-control" aria-label="Small">
  </div>

入力グループのサイズ調整/大:input-group-lg


Large
  <!-- 大サイズの入力グループ -->
  <div class="input-group input-group-lg">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    <input type="text" class="form-control" aria-label="Large">
  </div>