473,385 Members | 1,587 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Display CSS in Drop Down

I'm trying to display a small "color square" to the left of each combo box
choice. I know I can make each choice have a different background color, but
is it possible to display a background image for each row? In my code below,
I'm trying to display img_color1.gif which is a 5 pixel wide by 10 pixel
high transparent gif with a small color square on the background of a
choice.

My end goal is to have an Outlook looking combo box like the "LABEL" option
on outlook 2003's calendar event.

<style>
.cboColor1 {
background: url('http://www.mileslumber.net/images/img_color1.gif')
no-repeat;
}
.cboColor2 {
background: url(http://www.mileslumber.net/images/img_color1.gif) right
top
}
.cboColor3 {
list-style-type: disc; color:#3A3E59
}
</style>

' HTML Combo below

<select size="1" name="cboColors">
<option value="1">Choice 1</option>
<option value="2" style="background-color:blue; color:white">Choice
2</option>
<option value="3" class="cboColor1">Choice 3</option>
<option value="4" class="cboColor2">Choice 4</option>
<option value="5" style="background:
url('http://www.myweb.com/images/img_color1.gif') no-repeat;
color:white">Choice 5</option>
<option value="6" class="cboColor3">Choice 6</option>
Jul 22 '05 #1
5 1511
Gazing into my crystal ball I observed "scott" <sb*****@mileslumber.com>
writing in news:#g**************@TK2MSFTNGP09.phx.gbl:
I'm trying to display a small "color square" to the left of each combo
box choice. I know I can make each choice have a different background
color, but is it possible to display a background image for each row?


No. Color is possible for some browsers, but a background image is not.
Nesting an img element in the option element is not will not work either.
--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 22 '05 #2
Adrienne wrote:
I'm trying to display a small "color square" to the left of each
combo box choice. I know I can make each choice have a different
background color, but is it possible to display a background image
for each row?


No. Color is possible for some browsers, but a background image is
not. Nesting an img element in the option element is not will not
work either.


I'm not sure I agree. YOUR FAVORITE browser may not support it. But if the
browser offers full CSS2 support, a background image should be allowed on
option elements:

'background-image'
Value: <uri> | none | inherit
Initial: none
===> Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: absolute URI

http://www.w3.org/TR/CSS21/colors.ht...ckground-image
--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms. Please do not contact
me directly or ask me to contact you directly for assistance. If your
question is worth asking, it's worth posting.
Jul 22 '05 #3
Gazing into my crystal ball I observed "Dave Anderson"
<GT**********@spammotel.com> writing in
news:#x*************@TK2MSFTNGP12.phx.gbl:
Adrienne wrote:
I'm trying to display a small "color square" to the left of each
combo box choice. I know I can make each choice have a different
background color, but is it possible to display a background image
for each row?


No. Color is possible for some browsers, but a background image is
not. Nesting an img element in the option element is not will not work
either.


I'm not sure I agree. YOUR FAVORITE browser may not support it. But if
the browser offers full CSS2 support, a background image should be
allowed on option elements:

'background-image'
Value: <uri> | none | inherit
Initial: none
===> Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: absolute URI

http://www.w3.org/TR/CSS21/colors.ht...ckground-image


My favorite browsers are Opera 8 and Firefox 1.0, which both support CSS2
(IIRC FF supports some CSS3), but I could not get a background image to
show in either of those browsers, nor IE. I would imagine the browsers do
not support it perhaps because of having to draw the images and the height
of the option element. What would a browser do with an image that was
100px high? Cut if off, expand the option element's height? With color,
there is nothing to draw, really.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 22 '05 #4
Adrienne wrote:
But if the browser offers full CSS2 support, a background image
should be allowed on option elements:
My favorite browsers are Opera 8 and Firefox 1.0, which both support
CSS2 (IIRC FF supports some CSS3), but I could not get a background
image to show in either of those browsers, nor IE.


I don't think anyone makes the claim that Firefox has FULL CSS2 support.
Opera claims "In compliance with W3C standards," but does make specific
conformance claims. Perhaps Opera distinguishes between W3C Recommendations
and Specifications...

What would a browser do with an image that was 100px high? Cut
if off, expand the option element's height? With color, there
is nothing to draw, really.


The default display behavior would be in effect. What does the browser do
for any other element with a background image? Put another way, why do you
suppose there are style attributes background-repeat and
background-position?
--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms. Please do not contact
me directly or ask me to contact you directly for assistance. If your
question is worth asking, it's worth posting.
Jul 22 '05 #5
i tried every way, no dice on drop-down.
"Dave Anderson" <GT**********@spammotel.com> wrote in message
news:ed**************@TK2MSFTNGP10.phx.gbl...
Adrienne wrote:
But if the browser offers full CSS2 support, a background image
should be allowed on option elements:


My favorite browsers are Opera 8 and Firefox 1.0, which both support
CSS2 (IIRC FF supports some CSS3), but I could not get a background
image to show in either of those browsers, nor IE.


I don't think anyone makes the claim that Firefox has FULL CSS2 support.
Opera claims "In compliance with W3C standards," but does make specific
conformance claims. Perhaps Opera distinguishes between W3C
Recommendations and Specifications...

What would a browser do with an image that was 100px high? Cut
if off, expand the option element's height? With color, there
is nothing to draw, really.


The default display behavior would be in effect. What does the browser do
for any other element with a background image? Put another way, why do you
suppose there are style attributes background-repeat and
background-position?
--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message.
Use of this email address implies consent to these terms. Please do not
contact me directly or ask me to contact you directly for assistance. If
your question is worth asking, it's worth posting.

Jul 22 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Marcia | last post by:
Hello. I have just enrolled in a Visual Basic class, so please forgive this very basic question about the display environment of the VB Editor.... The illustrations in my textbook indicate...
1
by: fleemo17 | last post by:
For increased accessibility, I've replaced "display:none" with the Off-Left method of hiding my CSS drop-down menus because the Jaws screen reader doesn't see any of the menus hidden with...
5
by: Elvis V. | last post by:
Good morning, I have a table with three fields, Buildings, Floors and Rooms. This is what I would like to do; in my form when I select Building1 in my drop down box for Buildings, when I go to the...
1
by: Cleus | last post by:
Is there a way to display read only values in a drop down listbox? Below is an example of what I need displayed in the drop down list. The users should only be able to select Item 1-9. Category A-C...
3
by: pmud | last post by:
Hi, I have a drop down list bound to a database thorugh a data reader. It reads the customer names from data reader. Now, I want the user to be able to type more than one alphabet & the list...
4
by: rszebras | last post by:
I inherited a database (as a novice at Access) and need to modify it to make it more efficient, i.e., the assignment form needs to autopopulate with the client's name, address, phone number, etc.,...
1
by: tsunethere | last post by:
hi.. I wana search records from csv file by using perl and by calling this perl file in cgi . display this value searched from csv file into drop down list of HTML form. the code I need to write...
2
by: giandeo | last post by:
Hello all, It's almost a couple of weeks since i am struggling to get this code work. Unfortunately, i am stuck. There seems to be no hope... Please Help....... I am working with an asp page...
6
by: dkyadav80 | last post by:
Hi sir, I'm new about xml, javascript. I have two selection field(html) first is city and second is state. the city and state values should be store in xml file. when user select city then all...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
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
0
BarryA
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...
1
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...
0
marktang
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,...
0
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...
0
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...

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.