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

Julia Briggs

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

Subscribe Post Reply

10768

Martin Honnen

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

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

HTML / CSS

Select list without a helper button

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: ...

Javascript

Is it possible to have IE show different font styles for individual options in a <select> ?

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

HTML / CSS

Problem with Multi-Select List Boxes

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

Microsoft Access / VBA

Multiple select list in PHP

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

PHP

Multiple Select List

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

ASP / Active Server Pages

Select list help

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">';...

PHP

Centering background-image in list menu

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

HTML / CSS

2 multi select list boxes on one search form

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

Microsoft Access / VBA

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

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

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

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

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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

General

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

Similar topics