How to set background color of <select> - Javascript

This is a discussion on How to set background color of <select> - Javascript ; More HTML than Javascript I guess: is there a way to set the background color of the lines (&lt;option&gt;s) in a &lt;select&gt; field? In IE I can use style=&quot;background:'#234567'&quot; or style=&quot;background-color:'#234567'&quot; but in FF this has no effect. From reference ...

+ Reply to Thread
Results 1 to 3 of 3

How to set background color of <select>

  1. Default How to set background color of <select>

    More HTML than Javascript I guess: is there a way to set the background
    color of the lines (<option>s) in a <select> field?
    In IE I can use style="background:'#234567'" or
    style="background-color:'#234567'" but in FF this has no effect.
    From reference texts I get the impression there is no attribute for the
    color, but I find that hard to believe.
    I am using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    as doctype.
    TIA
    Tom



  2. Default Re: How to set background color of <select>

    "Tom de Neef" <tdeneef@qolor.nl> writes:

    > More HTML than Javascript I guess:


    CSS actually.

    > is there a way to set the background
    > color of the lines (<option>s) in a <select> field?


    Maybe!
    Select fields are replaced elements. There are no hard rules as to how
    those interact with styling. They could be using plain GUI provided
    components, or they could be drawn by the browser.

    > In IE I can use style="background:'#234567'" or


    Drop the apostrophes. It's just "background:#234567".

    > style="background-color:'#234567'" but in FF this has no effect.


    Could be the apostrophes.

    I just checked how Opera, IE 7 and Firefox handles styling of
    select and option elements.

    They all allow setting style on the select element, and setting
    overriding styles on the options. Opera and IE shows the select itself
    using the style of the selcted option, whereas Firefox only shows
    the value of the selected option with the styling of the select element.

    You can try something like:

    <html>
    <title>Select Test</title>
    <style type="text/css">
    ..foo { background: black; color:white; }
    ..bar { background: transparent; color: red;}
    </style>

    <select style="background:yellow; color: red;">
    <option style="background:green;color:white;">Abelone</option>
    <option class="foo">Banana</option>
    <option class="bar">Cantaloupe</option>
    </select>
    </html>

    > From reference texts I get the impression there is no attribute for the
    > color, but I find that hard to believe.


    There isn't. Styling of select elements is not part of the standard.
    Where a browser supports it anyway, it is likely that using standard
    CSS properties will do the trick, i.e., background-color and color.

    /L
    --
    Lasse Reichstein Nielsen - lrn@hotpop.com
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'

  3. Default Re: How to set background color of <select>

    "Lasse Reichstein Nielsen" <lrn@hotpop.com> writes:
    >
    >> More HTML than Javascript I guess:

    >
    > CSS actually.
    >
    >> is there a way to set the background
    >> color of the lines (<option>s) in a <select> field?

    >
    > Maybe!
    > Select fields are replaced elements. There are no hard rules as to how
    > those interact with styling. They could be using plain GUI provided
    > components, or they could be drawn by the browser.
    >
    >> In IE I can use style="background:'#234567'" or

    >
    > Drop the apostrophes. It's just "background:#234567".
    >
    >> style="background-color:'#234567'" but in FF this has no effect.

    >
    > Could be the apostrophes.
    >
    > I just checked how Opera, IE 7 and Firefox handles styling of
    > select and option elements.
    >
    > They all allow setting style on the select element, and setting
    > overriding styles on the options. Opera and IE shows the select itself
    > using the style of the selcted option, whereas Firefox only shows
    > the value of the selected option with the styling of the select element.
    >
    > You can try something like:
    >
    > <html>
    > <title>Select Test</title>
    > <style type="text/css">
    > .foo { background: black; color:white; }
    > .bar { background: transparent; color: red;}
    > </style>
    >
    > <select style="background:yellow; color: red;">
    > <option style="background:green;color:white;">Abelone</option>
    > <option class="foo">Banana</option>
    > <option class="bar">Cantaloupe</option>
    > </select>
    > </html>
    >
    >> From reference texts I get the impression there is no attribute for the
    >> color, but I find that hard to believe.

    >
    > There isn't. Styling of select elements is not part of the standard.
    > Where a browser supports it anyway, it is likely that using standard
    > CSS properties will do the trick, i.e., background-color and color.
    >


    Very helpful. Thank you!
    What seems to work in IE as well as FF is style in <select> together with
    style in <option>:
    <select style="background:transparent">
    <option style="background:#fff7d5">Yes</option>
    </select>

    Tom



+ Reply to Thread