469,275 Members | 1,871 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,275 developers. It's quick & easy.

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

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?
Jul 20 '05 #1
1 10594


Julia Briggs wrote:
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
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Bill S. | last post: by
2 posts views Thread by VK | last post: by
2 posts views Thread by Neil Ginsberg | last post: by
1 post views Thread by abhishekhs | last post: by
4 posts views Thread by rn5a | last post: by
2 posts views Thread by Kirkingly | last post: by
16 posts views Thread by stevedude | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.