Putting images with options in a dropdown list

This code will work only in Firefox:

<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
    <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
    <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
</select>

Edit (April 2018):

Firefox does not support this anymore.

You can't do that in plain HTML, but you can do it with jQuery:

JavaScript Image Dropdown

Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element or you can create by JSON object.

This is exactly what you need. See it in action here 8FydL/445

Example's Code below:

     $(".dropdown img.flag").addClass("flagvisibility");
        $(".dropdown dt a").click(function() {
            $(".dropdown dd ul").toggle();
        });
                    
        $(".dropdown dd ul li a").click(function() {
            var text = $(this).html();
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
        });
                    
        function getSelectedValue(id) {
            return $("#" + id).find("dt a span.value").html();
        }
    
        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown"))
                $(".dropdown dd ul").hide();
        });
    
        $(".dropdown img.flag").toggleClass("flagvisibility");

    .desc { color:#6b6b6b;}
    .desc a {color:#0092dd;}
    
    .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
    .dropdown dd { position:relative; }
    .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
    .dropdown a:hover { color:#5d4617;}
    .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
    .dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                    border:1px solid #d4ca9a; width:150px;}
    .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
    .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                      left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
    .dropdown span.value { display:none;}
    .dropdown dd ul li a { padding:5px; display:block;}
    .dropdown dd ul li a:hover { background-color:#d0c9af;}
    
    .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
    .flagvisibility { display:none;}

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <dl id="sample" class="dropdown">
            <dt><a href="#"><span>Please select the country</span></a></dt>
            <dd>
                <ul>
                    <li><a href="#">Brazil<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/br.png" alt="" /><span class="value">BR</span></a></li>
                    <li><a href="#">France<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/fr.png" alt="" /><span class="value">FR</span></a></li>
                   
                </ul>
            </dd>
        </dl>
        <span id="result"></span>

Putting images with options in a dropdown list

JavaScript Image Dropdown

Related

Recent Posts