>Hi!
>
>I'm reposting this because I never received a good answer.  Please remember,
>I'm asking about how to change the color in a server-side ASP.Net box, not a
>client side or Windows control.
>
>I'm using a standard server side ASP.Net listbox control on a web form. The
>page is basically various shades of green. The listbox itself has a pale
>green background and forest green text and a forest green border. However,
>when you move the cursor from one item to the next within the listbox or you
>click on an item in the listbox to select it, the background turns to the
>standard windows dark blue with white letters. Well,  I want the background
>to turn 'forest green' and the characters to turn 'wheat' when the item is
>selected. I already have one app in blue and this one needs to be slightly
>different in design, so I"ve chosen to use shades of green.

>
> To be fair to them, it doesn't seem to be part of the W3C standards for
> HTML or CSS.
>
> You can't achieve this with a listbox rendered as a <Select> tag, but
> you could fairly easily achieve it through an HTML table and a bit of
> javascript. I'd suggest that route.
>
> --
> Steve Walker
>

"Steve Walker" <st***@otolith.demon.co.uk> wrote in message
news:T8bVZeCY7Z1CFwrB@otolith.demon.co.uk...
> In message <9CA59108-2E40-4CC7-894A-6A66F56F4***@microsoft.com>, Karen
> Grube <KarenGr***@discussions.microsoft.com> writes
>>Yes, Steve, you're right.  The colors are controlled by the theme or
>>system
>>colors you select unless they are assigned within the control itself.  But
>>you CAN change them within a listbox.
>
> If you can give me the url of an example of someone doing this, I can
> probably figure out for you how they are doing it; if it's possible, I'd
> like to know how it's done just for the sake of curiosity.
>
>> I just don't know how.  You can
>>specify the color when it's rendered, but I don't know what that code
>>looks
>>like or where you have to put it.  My guess is that you have to create a
>>custom control based on the listbox and modify something.  I just don't
>>know
>>what.
>
> My best guess would be that if it can be done it would be through CSS,
> but I've looked through the complete list of CSS attributes for the
> <select> tag, and none of them appear to me to fit the bill.
>
>>I'm not sure what you mean by changing the html or how that will affect
>>the
>>rendering of a listbox.  If you could explain or show me what you're
>>talking
>>about that might be helpful.
>
> A listbox server control will render itself as a <select> tag in HTML.
> So this C# code:
>
> public class WebForm1 : System.Web.UI.Page
> {
>    protected System.Web.UI.WebControls.ListBox ListBox1;
>
>    private void Page_Load(object sender, System.EventArgs e)
>    {
>        for(int i=0;i<10;i++)
>        {
>            this.ListBox1.Items.Add("Item Number #" + i.ToString());
>        }
>    }
> }
>
> results in this HTML output:
>
>
> <select name="ListBox1" size="4" id="ListBox1"
> style="height:164px;width:335px;Z-INDEX: 101; LEFT: 86px; POSITION:
> absolute; TOP: 26px">
>        <option value="Item Number #0">Item Number #0</option>
>        <option value="Item Number #1">Item Number #1</option>
>        <option value="Item Number #2">Item Number #2</option>
>        <option value="Item Number #3">Item Number #3</option>
>        <option value="Item Number #4">Item Number #4</option>
>        <option value="Item Number #5">Item Number #5</option>
>        <option value="Item Number #6">Item Number #6</option>
>        <option value="Item Number #7">Item Number #7</option>
>        <option value="Item Number #8">Item Number #8</option>
>        <option value="Item Number #9">Item Number #9</option>
> </select>
>
> My approach to this kind of problem is to take the HTML output, tweak it
> to look how I want it, and then modify the ASP.Net code so that it
> generates the desired output.
>
> If, as I understand, what you want to achieve is not supported by the
> <select> tag, all is not lost. You can write your own control which
> renders as some form of HTML which *does* support the behaviour you
> want. So what you want is a scrolling window containing items which can
> be selected by clicking them. You can get a scrolling window by using
> something like:
>
> <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px"></div>
>
> You can mimic the appearance of a <select> list by putting a table
> within that:
>
> <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
>        <table>
>                <tr><td>Item Number #0</td></tr>
>                <tr><td>Item Number #1</td></tr>
>                <tr><td>Item Number #2</td></tr>
>        </table>
> </div>
>
> You can then add some javascript which colours the <td> with your
> selected colour (and resets the colour of any previously selected
> <td>)when it is clicked and which places the value of the <td> in a
> hidden field.
>
> <script language=javascript>
>
>    var lastSelected;
>    function SetSelected(source, value)
>    {
>        source.bgColor = 'green';
>        if(lastSelected != null)
>        {
>            lastSelected.bgColor='white';
>        }
>        selectedValue=value;
>        lastSelected=source;
>    }
>
> </script>
>
> <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
>    <input type=hidden id=selectedValue>
>    <table>
>        <tr><td onclick='SetSelected(this, 0)'>Item Number #0</td></tr>
>        <tr><td onclick='SetSelected(this, 1)'>Item Number #1</td></tr>
>        <tr><td onclick='SetSelected(this, 2)'>Item Number #2</td></tr>
>     </table>
> </div>
>
> So, you need then to write a webcontrol which generates this output, and
> which exposes the value of the hidden field as the selected value. You
> then have a webcontrol which looks like an ordinary listbox, but which
> behaves as you wish it to. This really isn't difficult to do, once you
> have got your head around writing webcontrols. Not difficult, maybe a
> bit fiddly getting it to work exactly as you want it to, and you then
> have a reusable control which provides the behaviour you want.
>
> Let me know if you want to go this route, and I can give a few pointers
> to approaching writing a control to do this.
>
> --
> Steve Walker

"clintonG" wrote:

> There's a project (and maybe more) at Codeproject that documents how to
> change the color of items selected in listbox controls. I've seen it myself
> noting this is best done on the client using the JavaScript getElementById
> method and CSS.
>
> <%= Clinton Gallagher
>          METROmilwaukee (sm) "A Regional Information Service"
>          NET csgallagher AT metromilwaukee.com
>          URL http://metromilwaukee.com/
>          URL http://clintongallagher.metromilwaukee.com/
>
> [1] http://codeproject.com/
>
>
>
>
> "Steve Walker" <st***@otolith.demon.co.uk> wrote in message
> news:T8bVZeCY7Z1CFwrB@otolith.demon.co.uk...
> > In message <9CA59108-2E40-4CC7-894A-6A66F56F4***@microsoft.com>, Karen
> > Grube <KarenGr***@discussions.microsoft.com> writes
> >>Yes, Steve, you're right.  The colors are controlled by the theme or
> >>system
> >>colors you select unless they are assigned within the control itself.  But
> >>you CAN change them within a listbox.
> >
> > If you can give me the url of an example of someone doing this, I can
> > probably figure out for you how they are doing it; if it's possible, I'd
> > like to know how it's done just for the sake of curiosity.
> >
> >> I just don't know how.  You can
> >>specify the color when it's rendered, but I don't know what that code
> >>looks
> >>like or where you have to put it.  My guess is that you have to create a
> >>custom control based on the listbox and modify something.  I just don't
> >>know
> >>what.
> >
> > My best guess would be that if it can be done it would be through CSS,
> > but I've looked through the complete list of CSS attributes for the
> > <select> tag, and none of them appear to me to fit the bill.
> >
> >>I'm not sure what you mean by changing the html or how that will affect
> >>the
> >>rendering of a listbox.  If you could explain or show me what you're
> >>talking
> >>about that might be helpful.
> >
> > A listbox server control will render itself as a <select> tag in HTML.
> > So this C# code:
> >
> > public class WebForm1 : System.Web.UI.Page
> > {
> >    protected System.Web.UI.WebControls.ListBox ListBox1;
> >
> >    private void Page_Load(object sender, System.EventArgs e)
> >    {
> >        for(int i=0;i<10;i++)
> >        {
> >            this.ListBox1.Items.Add("Item Number #" + i.ToString());
> >        }
> >    }
> > }
> >
> > results in this HTML output:
> >
> >
> > <select name="ListBox1" size="4" id="ListBox1"
> > style="height:164px;width:335px;Z-INDEX: 101; LEFT: 86px; POSITION:
> > absolute; TOP: 26px">
> >        <option value="Item Number #0">Item Number #0</option>
> >        <option value="Item Number #1">Item Number #1</option>
> >        <option value="Item Number #2">Item Number #2</option>
> >        <option value="Item Number #3">Item Number #3</option>
> >        <option value="Item Number #4">Item Number #4</option>
> >        <option value="Item Number #5">Item Number #5</option>
> >        <option value="Item Number #6">Item Number #6</option>
> >        <option value="Item Number #7">Item Number #7</option>
> >        <option value="Item Number #8">Item Number #8</option>
> >        <option value="Item Number #9">Item Number #9</option>
> > </select>
> >
> > My approach to this kind of problem is to take the HTML output, tweak it
> > to look how I want it, and then modify the ASP.Net code so that it
> > generates the desired output.
> >
> > If, as I understand, what you want to achieve is not supported by the
> > <select> tag, all is not lost. You can write your own control which
> > renders as some form of HTML which *does* support the behaviour you
> > want. So what you want is a scrolling window containing items which can
> > be selected by clicking them. You can get a scrolling window by using
> > something like:
> >
> > <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px"></div>
> >
> > You can mimic the appearance of a <select> list by putting a table
> > within that:
> >
> > <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
> >        <table>
> >                <tr><td>Item Number #0</td></tr>
> >                <tr><td>Item Number #1</td></tr>
> >                <tr><td>Item Number #2</td></tr>
> >        </table>
> > </div>
> >
> > You can then add some javascript which colours the <td> with your
> > selected colour (and resets the colour of any previously selected
> > <td>)when it is clicked and which places the value of the <td> in a
> > hidden field.
> >
> > <script language=javascript>
> >
> >    var lastSelected;
> >    function SetSelected(source, value)
> >    {
> >        source.bgColor = 'green';
> >        if(lastSelected != null)
> >        {
> >            lastSelected.bgColor='white';
> >        }
> >        selectedValue=value;
> >        lastSelected=source;
> >    }
> >
> > </script>
> >
> > <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
> >    <input type=hidden id=selectedValue>
> >    <table>
> >        <tr><td onclick='SetSelected(this, 0)'>Item Number #0</td></tr>
> >        <tr><td onclick='SetSelected(this, 1)'>Item Number #1</td></tr>
> >        <tr><td onclick='SetSelected(this, 2)'>Item Number #2</td></tr>
> >     </table>
> > </div>
> >
> > So, you need then to write a webcontrol which generates this output, and
> > which exposes the value of the hidden field as the selected value. You
> > then have a webcontrol which looks like an ordinary listbox, but which
> > behaves as you wish it to. This really isn't difficult to do, once you
> > have got your head around writing webcontrols. Not difficult, maybe a
> > bit fiddly getting it to work exactly as you want it to, and you then
> > have a reusable control which provides the behaviour you want.
> >
> > Let me know if you want to go this route, and I can give a few pointers
> > to approaching writing a control to do this.
> >
> > --
> > Steve Walker
>
>
>