473,569 Members | 2,704 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 10788


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.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).
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
11859
by: Bill S. | last post by:
Is there a way to set the font-weight for the <option> items in a select list in a form, ie: <td> <select name="txtMenuStatus" size="1"> <option id="optActive">active</option> <option id="optFrozen">frozen</option> </select> </td>
2
2014
by: VK | last post by:
A while ago there was a discussion how to implement a select list that would call a function right upon new selection is being made w/o clicking any additional buttons: ...
4
6780
by: Glen K | last post by:
The following works in Firefox buy not in Internet Explorer: <select> <option> option1 </option> <option style="font-style: bold"> option2 </option> </select> Are there any workarounds to allow IE to show different font styles for different elements in a select list?
2
2711
by: Neil Ginsberg | last post by:
I'm having a problem with a multi-select list box set to Simple multi-selection. If multiple items are selected and then I change the items in the list, the list positions previously selected are still selected. For example, if the list contains a, b, c, d, and e, and b and c are selected, and then the list is changed to contain v, w, x, y, z,...
1
5869
by: abhishekhs | last post by:
Hi all I have more than one multiple select lists in a page. Something like this <tr> <td> <select NAME="StrainList" ID="StrainList" SIZE="5" multiple="multiple" style="width: 150px"> <? for ($i=0; $i < $rows; $i++)
4
4384
by: rn5a | last post by:
A Form has 2 select lists. The 1st one whose size is 5 (meaning 5 options are shown at any given time) allows multiple selection whereas the 2nd one allows only 1 option to be selected at a time. When an option is selected in the 2nd select list, the ASP page posts itself. Assume that the 1st select list has the following 10 options (note...
2
1350
by: Kirkingly | last post by:
I want to create the following print_r results into a dynamic select list.. I have tried something like: <?php $prefixes = array(explode("\n", $board)); echo '<select name="tprefix">'; for($i = 0; $i < count($prefixes); $i++) { echo '<option value="'.$i.'">'.$prefixes.'</option>'; }
16
4918
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of "background" or "background-image", the positioning only works with specifying pixels. If I specify the vertical position in pixels, the image gets cut-off...
2
2738
by: woodey2002 | last post by:
Hi Guys and thanks for your time. I have a search form for my database that allows users to select multiple criteria from multi select list boxes. I successfully integrated a multi select listbox for users to select and search for counties. On the same page however I would like to integrate a similar multiselect box for nationality. I...
0
7612
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8122
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7673
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7970
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5513
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5219
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3653
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3640
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2113
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.