텍스트 대신 이미지를 표시하는 드롭다운 메뉴를 어떻게 만들 수 있나요?

드롭다운 옵션에 이미지 표시

텍스트 대신 이미지가 포함된 드롭다운 선택을 만드는 것은 어려울 수 있습니다. jQuery 콤보박스가 제안되었지만 이미지와 함께 텍스트 옵션을 제공하는 데 의존합니다. 텍스트를 이미지로 완전히 대체하려면 다른 접근 방식이 필요합니다.

영리한 CSS 솔루션

이미지가 온라인에서 선 두께를 나타내는 이 특정 사용 사례의 경우 페인팅 앱에는 JavaScript가 필요하지 않습니다. 대신 라디오 버튼과 CSS를 활용하여 원하는 효과를 만들 수 있습니다.

HTML 구조

<div>
<p><strong>CSS 스타일링</strong></p>
<pre class="brush:php;toolbar:false">#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;
}
#image-dropdown:hover {
    height: 200px; 
    overflow-y: scroll;
    transition: height 0.5s;
}
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#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;
}
#image-dropdown input:checked + label {
    opacity: 1 !important; 
    display: block;
}

어떻게요? 작동합니다

"for" 및 "id" 속성을 사용하여 라벨을 라디오 버튼과 연결하는 것이 비결입니다. 라벨을 클릭하면 해당 라디오 버튼이 활성화됩니다. CSS 스타일은 다음을 보장합니다.

• 접힌 상태에서는 선택한 라디오 버튼의 라벨만 표시됩니다.
• 드롭다운이 확장되면(마우스를 올리면) 모든 라벨이 표시됩니다.
• 선택한 라디오 버튼 다음의 라벨은 접힌 상태에서도 계속 표시됩니다.

By 배경 이미지를 레이블에 할당하면 드롭다운 옵션이 이미지로 나타납니다. 이 접근 방식은 텍스트를 이미지로 효과적으로 대체하여 JavaScript 없이 원하는 기능을 구현합니다.