HTML、CSS、JavaScript を使用してオプション選択メニュー内のチェックボックスをシミュレートするにはどうすればよいですか?

選択オプション内にチェックボックスを組み込む

チェックボックスを選択オプション メニューに直接埋め込むことができないため、この機能を必要とするデザインに直面した場合に課題が生じます。ただし、HTML、CSS、JavaScript を組み合わせて同様のことを実現することは可能です。

実装

1. HTML 構造:クラス「複数選択」。この div 内に、select 要素と、select 要素を完全にカバーするように配置されたクラス「overSelect」を持つ div を含めます。さらに、チェックボックスのオプションを含む ID が「checkboxes」の別の div を作成します。
2. CSS スタイル: 太字のテキストになるように選択要素をスタイルし、「overSelect」に視覚スタイルを適用します。 div を使用して、選択オプションの外観を模倣します。 「チェックボックス」 div のスタイルを定義して、その表示とレイアウトを制御します。
3. JavaScript 機能: JavaScript を使用して、クリック時に「チェックボックス」 div の表示を切り替えます。 event.

コード

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div>

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

このソリューションは、[オプションの選択] メニュー内のチェックボックスのような機能にほぼ似たものを提供します。ただし、これは Select Option 要素の標準の動作から逸脱していることに注意することが重要です。

以上がHTML、CSS、JavaScript を使用してオプション選択メニュー内のチェックボックスをシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。