How To Make A Dropdown-menu With Small Image?

Details I want to add a little flag to left of my dropdown menu I am not sure what is the best practice for that. Here is what I've tried

Solution 1:

Sorry, but it's not possible to add images inside a <select>

Your best option would be to use a <ul> with <li> elements and build something that function's like a select but built with other elements

something along the lines of

<ul><li><imgsrc="your image here" />some test here</li><!-- or use css or a font icon for cleaner mark up --></ul>

Then bind some mouse events with javascript

Solution 2:

Since you already have a containing class around your select, you could do something like this:

HTML:

<div><select><option>1</option><option>2</option></select></div>

CSS:

select,
option {
    width: 200px;}

div:before {
    content: '';
    display:inline-block;
    width: 18px;
    height: 18px;
    background-image: url('yourImageHere.png');}

http://jsfiddle.net/w1bfvfft/

Solution 3:

Take a look at Jquery UI:

http://jqueryui.com/selectmenu/#custom_render

This is what you need :)

Share