Image with in select tag in html

Question

Is it possible to place an image in a <select> dropdown list?

I tried the following piece of code

<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 is not showing NOIMAGE, which is the alternative to src of image.

i think. you can't add an image in an option tag. Rather than you can simulate like a drop down using css and jquery — Anish, Nov 28 '11 at 08:42
check this http://stackoverflow.com/questions/1697996/image-in-select-element — Ahmad Y. Saleh, Nov 28 '11 at 08:42

score 4 · Answer 1 · answered Nov 28 '11 at 08:47

4

You can't add an image to a select tag.

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

answered Nov 28 '11 at 08:47

tarmes

15,366
10
53
87

score 3 · Answer 2 · edited Mar 07 '17 at 22:43

3

Maybe this will help you a little. It should work. Have 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>

edited Mar 07 '17 at 22:43

TylerH

20,799
66
75
101

answered Nov 28 '11 at 08:52

Ariful Islam

7,639
7
36
54

Eventhough no change in page.! – RAVITEJA SATYAVADA Nov 28 '11 at 09:09
1

@RAVITEJA it should work. would you please take look at the link. – Ariful Islam Nov 28 '11 at 09:25
Is this CSS 3? What kind of browser support does this have? – Jimmery Dec 05 '13 at 10:48
@Jimmery Looks like there's nothing in here that was CSS3; you should bale to use this in IE6 if you wanted to. – TylerH Mar 07 '17 at 22:42
@TylerH the CSS property background-image wasnt supported by IE until version 9 (http://caniuse.com/#search=background-image), the CSS seems fine, I was just wondering about the browser support for putting background images onto – Jimmery Mar 08 '17 at 09:47

Image with in select tag in html

2 Answers2