HTML, CSS 및 JavaScript를 사용하여 선택 옵션 내에 확인란을 만드는 방법은 무엇입니까?

선택 옵션 내 체크박스: HTML, CSS, JavaScript를 사용한 솔루션

선택 옵션 메뉴 내에 체크박스를 직접 추가하는 것은 불가능합니다. 그러나 HTML, CSS 및 JavaScript와 관련된 해결 방법을 사용하면 유사한 기능을 구현할 수 있습니다.

인터페이스 만들기

HTML과 CSS는 다음을 사용하여 선택 옵션 메뉴를 만듭니다. 체크박스 목록을 숨기고 표시하는 추가 클릭 가능한 div입니다. div는 선택 옵션 메뉴의 모양을 모방하며 클릭하면 확인란의 표시 여부가 전환됩니다.

JavaScript Logic

JavaScript 함수는 div의 표시 속성을 전환합니다. 확인란 컨테이너 - 사용자와 선택 상자의 상호 작용에 따라 표시되거나 숨겨지도록 보장 div.

샘플 구현:

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

.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;
}

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;
  }
}

이 접근 방식은 통합 확인란을 사용하여 선택 옵션 메뉴의 원하는 기능을 제공합니다. 형태 디자인의 유연성.

위 내용은 HTML, CSS 및 JavaScript를 사용하여 선택 옵션 내에 확인란을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!