HTML, CSS 및 JavaScript를 사용하여 선택 옵션 메뉴 내의 확인란을 어떻게 시뮬레이션할 수 있습니까?

선택 옵션에 체크박스 통합

선택 옵션 메뉴에 체크박스를 직접 삽입할 수 없다는 점은 이 기능이 필요한 디자인에 직면했을 때 어려운 문제입니다. 그러나 HTML, CSS 및 JavaScript의 조합을 사용하면 유사한 결과를 얻을 수 있습니다.

구현

1. HTML 구조: 클래스 "다중 선택" 이 div 내에는 선택 요소와 선택 요소를 덮기 위해 절대 위치에 있는 "overSelect" 클래스가 있는 div를 포함합니다. 또한 확인란 옵션을 포함할 "checkboxes"라는 ID를 가진 다른 div를 만듭니다.
2. CSS 스타일링: select 요소에 굵은 텍스트를 적용하고 시각적 스타일을 "overSelect"에 적용합니다. div를 사용하여 선택 옵션의 모양을 흉내냅니다. "체크박스" div의 스타일을 정의하여 가시성과 레이아웃을 제어합니다.
3. JavaScript 기능: JavaScript를 사용하여 클릭 이벤트 시 "체크박스" div의 가시성을 전환합니다.

코드

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!