How To Make A Dropdown-menu With Small Image?

Question

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><img src="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:

Baca Juga

<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 :)

Html5 Dictionary

How To Make A Dropdown-menu With Small Image?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Make A Dropdown-menu With Small Image?"