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

Julia Briggs · Jan 15, 2004

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?
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?

I am wanting to change the font size of a group of lines in a select
box, while keeping a larger font size for the top line, I thought of
adding an image --- IE & NS both ignore font style attributes for
individual select lines (in IE you can change the color of an
individual line, but that's about it-- unless there is some other way)
Any ideas to achieve this desired effect?

Martin Honnen · Jan 15, 2004

Julia said:
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?

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.kibological {
padding-left: 17px;
height: 17px;
background-image: url(yourImage16x16.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>
<select>
<option>option 1</option>
<option class="kibological">Kibology</option>
</select>
<select size="3">
<option>option 1</option>
<option class="kibological">Kibology</option>
</select>
</p>
</body>
</html>

But only a few browsers will support that, Mozilla does (and Mozilla
based browsers like Netscape 6/7).

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?

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

How Do I Set text on an Image and use the image as a border?	7	Mar 16, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Inserting a line break	3	May 14, 2008
I want my website user can input(not select) an entry inside adrop-down menu, how to do this?	1	Aug 22, 2009
Select List transfer to another List with array	0	Apr 20, 2012
I need help fixing my website	2	Oct 15, 2023
Select list without a helper button	2	Jul 20, 2005
"Clear All" items in a SELECT MULTIPLE box via JavaScript	3	Jun 1, 2007

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

Julia Briggs

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads