How can I create a dropdown menu that displays images instead of text?

Displaying Images in Dropdown Options

Creating a dropdown select that features images instead of text can prove challenging. While the jQuery combobox has been proposed, it relies on providing text options accompanied by images. To fully replace text with images, a different approach is needed.

A Clever CSS Solution

For this specific use case, where the images represent line thicknesses in an online painting app, no JavaScript is required. Instead, we can leverage radio buttons and CSS to create the desired effect.

HTML Structure

<div>
<p><strong>CSS Styling</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;
}

How It Works

The trick lies in associating labels with radio buttons using the "for" and "id" attributes. When a label is clicked, the corresponding radio button is activated. The CSS styling ensures that:

• In the collapsed state, only the selected radio button's label is visible.
• When the dropdown is expanded (on hover), all labels are displayed.
• Labels following checked radio buttons remain visible even in the collapsed state.

By assigning background images to labels, the dropdown options appear as images. This approach effectively replaces text with images, achieving the desired functionality without JavaScript.