disabled

bootstrap5.css

bootstrap5.css
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}
bootstrap5.css
.form-control[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
bootstrap5.css
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #dde0e3;
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #dde0e3;
}
bootstrap5.css
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
bootstrap5.css
.form-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}
bootstrap5.css
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
bootstrap5.css
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}
bootstrap5.css
.btn-check[disabled] + .btn,
.btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}
bootstrap5.css
.form-range:disabled {
  pointer-events: none;
}
bootstrap5.css
.form-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
bootstrap5.css
.form-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}
bootstrap5.css
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  pointer-events: none;
  /* 透明度は、0.0(完全に透明)~1.0(完全に不透明) */
  /* 文字を薄くしたいときに利用する */
  opacity: 0.65;
}
bootstrap5.css
.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-secondary:disabled,
.btn-secondary.disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-success:disabled,
.btn-success.disabled {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
bootstrap5.css
.btn-info:disabled,
.btn-info.disabled {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}
bootstrap5.css
.btn-warning:disabled,
.btn-warning.disabled {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-danger:disabled,
.btn-danger.disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap5.css
.btn-light:disabled,
.btn-light.disabled {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap5.css
.btn-dark:disabled,
.btn-dark.disabled {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}
bootstrap5.css
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: #0d6efd;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: #6c757d;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-success:disabled,
.btn-outline-success.disabled {
  color: #198754;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-info:disabled,
.btn-outline-info.disabled {
  color: #0dcaf0;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  color: #ffc107;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
  color: #dc3545;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-light:disabled,
.btn-outline-light.disabled {
  color: #f8f9fa;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
  color: #212529;
  background-color: transparent;
}
bootstrap5.css
.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
}
bootstrap5.css
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item.disabled,
.dropdown-menu-dark .dropdown-item:disabled {
  color: #adb5bd;
}
bootstrap5.css
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
bootstrap5.css
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
bootstrap5.css
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}
bootstrap5.css
.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}
bootstrap5.css
.btn-close:disabled,
.btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}

html bootstrap5 Sample

リスト項目を無効状態にする:disabled


  • 無効化されるように見えるリスト項目
  • リスト項目2
  • リスト項目3
  <ul class="list-group">
    <li class="list-group-item disabled">無効化されるように見えるリスト項目</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

ホバー、無効、アクティブの状態を持つ :list-groupとlist-group-item-action


リスト項目1 リスト項目2
  <!-- ホバー、無効、アクティブの状態を持つ  -->
  <!-- btnクラスは使わず、list-group-item-actionを使う  -->
  <!-- disabledにすることで、pointer-events: none が適用され、ホバーやアクティブな状態がトリガーを防ぐ -->
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <button type="button" class="list-group-item list-group-item-action">リスト項目ボタン</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目ボタンdisabled</button>
  </div>

ボタンのリストグループ:list-group-item-action


  <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
    <button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
  </div>

ページネーションの配置 中央寄せ:justify-content-center


  <nav>
    <!-- justify-content-centerは、flexbox utilitiesでここでも利用できる -->
    <!-- aria-disabled =" true "に加えて、 tabindex="-1" 属性(キーボードからのフォーカスを防ぐ) -->
    <!-- これにより、JavaScript を用いてこれらの機能を無効にできる -->
    <ul class="pagination justify-content-center">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションの配置 右寄せ:justify-content-end


  <nav>
    <ul class="pagination justify-content-end">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a> </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

リンクの無効状態やアクティブ状態を指定する:activeとdisabled


  <nav>
    <ul class="pagination">
      <!-- リンク無効 -->
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <!-- 現在のページ位置 visually-hiddenで視覚支援説明 -->
      <li class="page-item active"><a class="page-link" href="#">2 <span class="visually-hidden">現ページ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションのサイズ:pagination-lg


  <nav>
    <ul class="pagination pagination-lg">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションのサイズ:pagination-sm


  <nav>
    <ul class="pagination pagination-sm">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">次</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">前</a></li>
    </ul>
  </nav>

js メニュー項目にアクティブの状態を設定する:activeとaria-current


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" tabindex="-1" aria-disabled="true" href="#">メニュー02(無効)</a>
      <!-- activeにした場合は、aria-current="true"で視覚支援をする -->
      <a class="dropdown-item active" aria-current="true" href="#">メニュー03(アクティブ)</a>
    </div>
  </div>

フォームのファイル選択:file


  <div class="mb-3">
    <label for="formFile" class="form-label">Default サンプル</label>
    <input class="form-control" type="file" id="formFile" />
  </div>
  <div class="mb-3">
    <label for="formFileMultiple" class="form-label">複数ファイル選択可 multiple</label>
    <input class="form-control" type="file" id="formFileMultiple" multiple />
  </div>
  <div class="mb-3">
    <label for="formFileSm" class="form-label">Small サンプル</label>
    <input class="form-control form-control-sm" id="formFileSm" type="file" />
  </div>
  <div>
    <label for="formFileLg" class="form-label">Large サンプル</label>
    <input class="form-control form-control-lg" id="formFileLg" type="file" />
  </div>
  <div class="mb-3">
    <label for="formFileDisabled" class="form-label">ファイル選択不可</label>
    <input class="form-control" type="file" id="formFileDisabled" disabled />
  </div>

チェックボックスを無効にする:disabled


  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio3" value="option3" disabled />
    <label class="form-check-label" for="Radio3">3を選択 (disabled)</label>
  </div>

チェックボックスとラジオボタンを無効にする


  <!-- チェックボックスを無効にする -->
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="checkbox11" disabled>
    <label class="form-control-label" for="checkbox11">
      チェック(無効)
    </label>
  </div>
  <!-- ラジオボタンを無効にする -->
  <div class="form-check">
    <input type="radio" name="radioDisabled" id="checkbox12" class="form-check-input" disabled>
    <label class="form-control-label" for="checkbox12">
      オプション(無効)
    </label>
  </div>

スイッチ型のラジオボタン:form-switch


  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled />
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled />
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
  </div>

一連の入力グループをまとめて無効にする:disabled


  <fieldset disabled>
    <div class="mb-3">
      <label for="disabledTextInput">無効な入力欄</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect">無効なプルダウンメニュー</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
      <label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
    </div>
    <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
  </fieldset>

水平配置のフォームを作成する:mb-3とrowとcol


ラジオボタン
チェックボックス
  <div class="mb-3 row">
    <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <fieldset class="mb-3">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
          <label class="form-check-label" for="radios1">オプション1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
          <label class="form-check-label" for="radios2">オプション2</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
          <label class="form-check-label" for="radios3">オプション3(無効)</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="mb-3 row">
    <div class="col-sm-2">チェックボックス</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1">
        <label class="form-check-label" for="check1">チェックする</label>
      </div>
    </div>
  </div>
  <div class="mb-3 row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>

無効状態のリンクボタンを作成する:disabled


  <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">無効ボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

無効状態のボタンを作成する:disabled


  <button class="btn btn-lg btn-primary" disabled>無効ボタン</button>
  <button class="btn btn-lg btn-primary">通常ボタン</button>

ナビゲーション:navとnav-itemとnav-link


  <ul class="nav">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーション中央寄せ:justify-content-center


  <ul class="nav justify-content-center">
    <!-- 中央寄せ flexbox utilitiesを使う-->
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーション右寄せ:justify-content-end


  <!-- デフォルトは左寄せなので、特にclassは用意されていない -->
  <ul class="nav justify-content-end">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを垂直(縦)に並べる:flex-column


  <!-- サイドメニューで使える -->
  <ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを縦に並べるli使わないaのみ:flex-column


  <!-- .nav はdisplay: flex を使用しているためaタグでも、リストと同じことができる -->
  <!-- DOM数を少なくという意味では、こちらがいい -->
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">アクティブ</a>
    <a class="nav-link" href="#">リンク</a>
    <a class="nav-link disabled" href="#">無効</a>
  </nav>

ピル型ナビゲーション:nav-pills


  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲ―ション項目の幅を調整:nav-fill


  <!-- 幅いっぱいで調整される -->
  <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">アクティブ</a>
    <a class="nav-item nav-link" href="#">リンク</a>
    <a class="nav-item nav-link disabled" href="#">無効</a>
  </nav>

ナビゲーション:flex


  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

js ピル型ナビゲーションドロップダウン:nav-linkとdropdown-toggle


  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

タブ型ナビゲーション:nav-tabs


  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

js タブ型ナビゲーションドロップダウン:dropdown-toggle


  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>