JavaScript 없이 이미지를 옵션으로 사용하여 드롭다운 선택을 만드는 방법은 무엇입니까?

이미지를 옵션으로 사용하여 드롭다운 선택을 만드는 방법

옵션에 텍스트 대신 이미지가 포함된 드롭다운 선택을 구현하려고 합니다. . jQuery 콤보 상자를 사용하는 것이 인기 있는 제안일 수 있지만 텍스트를 기본 옵션으로 유지하고 이미지를 동반 아이콘으로만 사용합니다. 그러나 요구 사항은 이미지가 텍스트를 완전히 대체하는 것입니다.

다행히도 JavaScript를 사용하지 않고도 이 솔루션을 구현할 수 있습니다. 방법은 다음과 같습니다.

HTML 구조:

<div>
<p>이 구조에서는 드롭다운 내에서 라디오 버튼을 "옵션"으로 사용합니다. 연결된 라벨을 클릭하면 라디오 버튼이 활성화되어 드롭다운 목록 기능이 생성됩니다.</p>
<p><strong>CSS 스타일링:</strong></p>
<pre class="brush:php;toolbar:false">/* Style the overall dropdown box */
#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;  /* Hide when collapsed */
}
/* Style the dropdown when expanded */
#image-dropdown:hover {
    height: 200px;
    overflow-y: scroll;  /* Allow scrolling */
    transition: height 0.5s;
}
/* Hide the radio button visuals */
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* Style the dropdown options */
#image-dropdown label {
    display: none;
    margin: 2px;
    height: 46px;
    opacity: 0.2;
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;  /* Show all options when expanded */
}
/* Show the option related to the selected radio button */
#image-dropdown input:checked + label {
    opacity: 1 !important;
    display: block;
}

이 스타일은 요소의 가시성 및 스타일을 통해 이미지를 옵션으로 사용하여 드롭다운 선택의 환상을 만듭니다.

http://jsfiddle.net/NDCSR/1/에 제공된 예를 특정 요구 사항에 맞게 사용자 정의할 수 있습니다. 예를 들어 "for" 속성 값에 따라 라벨 선택기를 사용하여 각 옵션의 배경 이미지를 다르게 설정하는 등의 작업이 가능합니다.