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

선택 옵션 메뉴에 체크박스 추가

선택 요소 내에 체크박스를 직접 삽입할 수는 없지만 HTML, CSS 및 JavaScript의 조합을 사용하여 유사한 기능을 제공합니다.

HTML 코드:

선택 메뉴와 체크박스를 담을 "multiselect" 클래스를 사용하여 div 컨테이너를 만듭니다.

"multiselect" div 내에서 두 개의 하위 div를 만듭니다.

1. selectBox: 이 div에는 선택 요소와 이를 덮는 투명한 오버레이가 포함됩니다. 클릭하면 선택 옵션이 표시됩니다.
2. 체크박스: 이 div는 개별 체크박스를 포함하며 처음에는 숨겨집니다.

CSS 코드:

다음 스타일을 적용하세요. 요소:

• multiselect: 고정 너비를 설정하여 메뉴 크기를 제한합니다.
• selectBox: 선택 요소를 배치하고 div를 기준으로 한 오버레이
• overSelect: 절대값 사용 선택 옵션을 덮도록 배치합니다.
• 체크박스: 처음에는 "display: none"을 사용하여 체크박스를 숨깁니다. 선택 옵션과 비슷하게 레이블 스타일을 지정합니다.

JavaScript 코드:

"checkbox"의 가시성을 전환하는 "selectBox" div에 이벤트 리스너를 추가합니다. " div를 클릭하면

예 코드:

<form>
  <div>

이 코드는 선택 옵션을 클릭할 때 켜고 끌 수 있는 확인란이 있는 옵션 선택 메뉴를 제공합니다. 확인란은 메뉴에서 선택한 항목을 표시하여 선택 옵션의 동작을 모방합니다.

위 내용은 HTML, CSS 및 JavaScript를 사용하여 선택 옵션 메뉴 내의 확인란을 어떻게 시뮬레이션할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!