텍스트 대신 이미지로 드롭다운 메뉴를 만드는 방법은 무엇입니까?

이미지가 포함된 드롭다운 선택

텍스트 대신 이미지를 표시하는 드롭다운 선택을 만들려고 합니다. jQuery 콤보박스가 종종 제안되기는 하지만 여전히 이미지 옆에 텍스트가 필요합니다.

해결책: 텍스트를 이미지로 대체

놀랍게도 JavaScript 없이 이 드롭다운 메뉴를 구현할 수 있습니다. ! 방법은 다음과 같습니다.

HTML 구조

라디오 버튼 및 라벨 사용:

<div>
<p><strong>CSS 스타일링</strong></p>
<p>CSS를 사용하여 스타일을 지정합니다. 라디오 버튼을 숨기고, 드롭다운 옵션처럼 보이도록 라벨 스타일을 지정하고, 마우스를 올리면 드롭다운이 확장됩니다.</p>
<pre class="brush:php;toolbar:false">#image-dropdown {
    /* Style the "box" in its minimized state */
    ...
}
#image-dropdown:hover {
    /* When expanded, the dropdown will get native means of scrolling */
    ...
}
#image-dropdown input {
    /* Hide the nasty default radio buttons */
    ...
}
#image-dropdown label {
    /* Style the labels to look like dropdown options */
    ...
}
...
#image-dropdown input:checked + label {
    /* Make the selected option visible in the collapsed menu */
    ...
}

기능

라디오 버튼은 라벨에 연결됩니다. 라벨을 클릭하면 해당 라디오 버튼이 활성화됩니다. 드롭다운 위로 마우스를 가져가면 확장되어 모든 이미지 옵션이 표시됩니다. 선택한 이미지는 접힌 상태에서도 계속 표시됩니다.

예

전체 예는 다음에서 확인하세요: http://jsfiddle.net/NDCSR/1/

구현 세부 정보

• 상대 위치 지정 및 높은 Z-인덱스가 있는 컨테이너 내에서 절대 위치 지정과 함께 사용하세요.
• 다양한 선 스타일의 경우 각 라벨 기반에 고유한 배경 이미지를 사용하세요. "for" 속성에 대해 설명합니다.