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

[Karen Grube]

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

 

[Steve Walker]

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.

 

[Karen Grube]

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

 

[Steve Walker]

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

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.

 

[clintonG]

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/

 

[Michael Baltic]

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

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/

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.


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


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.