Inserting an image in a select list, or having multiple font styles -- anyway to do this?

**Martin Honnen** · Jul 20 '05, 01:33 PM

Re: Inserting an image in a select list, or having multiple fontstyles -- anyway to do this?

Julia Briggs wrote:
[color=blue]
> Hello, is there anyway to insert an image on any particular <select>
> option line in a drop down list without using a specialty drop-down?[/color]

A <select> and an <option> element is an HTML element, if a HTML allowed
you to insert an image into an option then you could probably do that in
some browsers with JavaScript too but the HTML content model doesn't
allow <img> elements inside <option> elements.
If the issue is presentational you could use CSS to add some padding and
a background image positioned in the padding area as in

<html>
<head>
<title>CSS background-image inside of an option element</title>
<style type="text/css">
option.kibologi cal {
padding-left: 17px;
height: 17px;
background-image: url(yourImage16 x16.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>
<select>
<option>optio n 1</option>
<option class="kibologi cal">Kibology</option>
</select>
<select size="3">
<option>optio n 1</option>
<option class="kibologi cal">Kibology</option>
</select>
</p>
</body>
</html>

But only a few browsers will support that, Mozilla does (and Mozilla
based browsers like Netscape 6/7).
[color=blue]
> Any good ones out there that can be made to resemble a default windows
> drop-down list if there is no-way to add this detail?[/color]

If you mainly target IE/Win then look at the following DHTML
implementation of a <select> replacement

http://webfx.eae.net/dhtml/select/jsGenerated.html

--

Martin Honnen

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

Inserting an image in a select list, or having multiple font styles -- anyway to do this?

Inserting an image in a select list, or having multiple font styles -- anyway to do this?

Comment