REPOST: How can I change the color of the Selected Item in a list

Discussion in 'ASP .Net Web Controls' started by Karen Grube, Jul 13, 2005.

  1. Karen Grube

    Karen Grube Guest

    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.

    How do I do this without having to completely re-create the whole listbox
    control? I really don't think I should have to do that just to control the
    color of the selected item. The same goes for the listbox scrollbars, by the
    way.

    If there are attributes for setting these colors or 'styles' that I'm
    unaware of, any code samples would be greatly appreciated.

    If there's a free replacement listbox control somewhere that I can download
    that just allows the style of the selected item(s) in a listbox to be
    modified, I'd appreciate knowing about that. Or, if there is a free or
    lowcost one available that also has the capability to define the scrollbar
    colors as well as the selected item color within the control, that would be
    very cool! But only if it's free or very low cost under $30).

    Please let me know. I seem to be finding this question in a lot of forums
    without good answers! I'm surprised Microsoft hasn't fixed this yet.

    Thanks!
    Karen Grube
    Karen Grube, Jul 13, 2005
    #1
    1. Advertising

  2. Karen Grube

    Steve Walker Guest

    In message <>, Karen
    Grube <> writes
    >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.


    As far as I know, you simply can't. The selected colour does not appear
    to be controllable from HTML, and the ASP.Net ListBox must ultimately be
    rendered in HTML. I've just changed the colour scheme for my PC from
    blue to silver and now my selected listbox items are grey instead of
    blue in both Firefox and IE6.

    >Please let me know. I seem to be finding this question in a lot of forums
    >without good answers! I'm surprised Microsoft hasn't fixed this yet.


    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, Jul 13, 2005
    #2
    1. Advertising

  3. Karen Grube

    Karen Grube Guest

    Re: REPOST: How can I change the color of the Selected Item in a

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

    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.

    Again, if anyone knows of a free or low cost alternative listbox control,
    I'd appreciate hearing about that as well.

    Thanks!
    Karen


    >
    > 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
    >
    Karen Grube, Jul 13, 2005
    #3
  4. Karen Grube

    Steve Walker Guest

    Re: REPOST: How can I change the color of the Selected Item in a

    In message <>, Karen
    Grube <> 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
    Steve Walker, Jul 14, 2005
    #4
  5. Karen Grube

    clintonG Guest

    Re: REPOST: How can I change the color of the Selected Item in a

    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" <> wrote in message
    news:...
    > In message <>, Karen
    > Grube <> 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, Jul 14, 2005
    #5
  6. Re: REPOST: How can I change the color of the Selected Item in a

    You will need a custom drop down control. Infragistics ultrawebcombo control
    has properties for all of these things that you want to control.

    Building your own would require serious time for development and debugging.
    --
    Direct Email: Michael.Baltic@RemoveCharactersUpTo#NCMC.Com

    Staff Consultant II
    Enterprise Web Services
    Cardinal Solutions Group


    "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" <> wrote in message
    > news:...
    > > In message <>, Karen
    > > Grube <> 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

    >
    >
    >
    Michael Baltic, Jul 14, 2005
    #6
    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. =?Utf-8?B?S2FyZW4gR3J1YmU=?=

    How to change the color of the selected item in a web listbox cont

    =?Utf-8?B?S2FyZW4gR3J1YmU=?=, Jun 25, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    929
    Eliyahu Goldin
    Jun 26, 2005
  2. Iain
    Replies:
    3
    Views:
    928
  3. QUASAR
    Replies:
    6
    Views:
    420
    QUASAR
    Jan 17, 2004
  4. SSP

    dropdown list does not change selected item?

    SSP, Oct 29, 2003, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    1,132
  5. _andrea.l
    Replies:
    2
    Views:
    78
    _andrea.l
    Jun 25, 2005
Loading...

Share This Page