Display CSS in Drop Down

Discussion in 'ASP General' started by scott, May 31, 2005.

  1. scott

    scott Guest

    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>
     
    scott, May 31, 2005
    #1
    1. Advertising

  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.html#propdef-background-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.
     
    Dave Anderson, May 31, 2005
    #2
    1. Advertising

  3. 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.
     
    Dave Anderson, May 31, 2005
    #3
  4. scott

    scott Guest

    i tried every way, no dice on drop-down.


    "Dave Anderson" <> wrote in message
    news:...
    > 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.
    >
     
    scott, Jun 1, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    817
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,072
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    547
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    317
  5. Replies:
    3
    Views:
    322
Loading...

Share This Page