Image using select tag in html

Question

Can I place an image in a drop-down list <select>?

I tried the following code snippet

<select name="selection">
    <option><img src="dbdesign.jpg" alt="NOIMAGE"/>list1</option>
    <option><img src="dbdesign.jpg" alt="NOIMAGE"/>list2</option>
</select>

The output shows list1 and list2 but does not show NOIMAGE , which is an alternative to src image.

Answer 1

You cannot add an image to the select tag.

You can create custom menus using CSS / HTML / Javascript, but obviously this works a lot more.

Answer 2

Perhaps this will help you a little. It should work. Take a look at http://jsfiddle.net/jJfdr/4/

#selection option {
    background: url('dbdesign.jpg') 0 0 no-repeat;
    padding-left: 50px;
    height: 30px;
    background-size: 50%;
}

<select id="selection">
    <option>list1</option>
    <option>list2</option>
</select>

Run codeHide result