changing background color of multiple select

[Bosconian]

I have two multiple select inputs. Initially the first contains a bunch of
items and the second is empty. Using a common method, I move items back and
forth by double clicking on them.

This portion works perfectly, but I would also like to change the background
color of the select element with the current focus.

I have defined the following classes:

..selected {
background: #C0FFFF
}
..deselected {
background: #FFFFFF
}

Using the following function below I am able to shift the background color
of rows containing content, but the color of the empty rows remain the
"selected" color. How can this effect be achieved for all rows, whether they
contain content or not?

Thanks!

[Bosconian]

[Repost including function.]

I have two multiple select inputs. Initially the first contains a bunch
ofitems and the second is empty. Using a common method, I move items back
andforth by double clicking on them.

This portion works perfectly, but I would also like to change the background
color of the select element with the current focus.

I have defined the following classes:

..selected {
background: #C0FFFF
}
..deselected {
background: #FFFFFF
}

Using the following function below I am able to shift the background color
of rows containing content, but the color of the empty rows remain the
"selected" color. How can this effect be achieved for all rows, whether they
contain content or not?

Thanks!

-----------------------------------------------------------

function changeBackground(obj,theSelect) {
for (var i=1; i<obj.length; i++) {
obj[i].className = 'deselected';
}
obj[theSelect].className = 'selected';
}

[Randy Webb]

Bosconian said the following on 5/3/2006 12:36 PM:

[Repost including function.]

I have two multiple select inputs. Initially the first contains a bunch
ofitems and the second is empty. Using a common method, I move items back
andforth by double clicking on them.

This portion works perfectly, but I would also like to change the background
color of the select element with the current focus.

I have defined the following classes:

..selected {
background: #C0FFFF
}
..deselected {
background: #FFFFFF
}

Using the following function below I am able to shift the background color
of rows containing content, but the color of the empty rows remain the
"selected" color. How can this effect be achieved for all rows, whether they
contain content or not?

Rather than changing the background of each individual option, change
the background color of the select itself. Thats if I am reading what
you wrote correctly.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Bosconian]

> Rather than changing the background of each individual option, change

the background color of the select itself. Thats if I am reading what
you wrote correctly.

Yes, that's correct. I was unsure of the syntax.

[Randy Webb]

Bosconian said the following on 5/3/2006 1:12 PM:

Rather than changing the background of each individual option, change
the background color of the select itself. Thats if I am reading what
you wrote correctly.

Yes, that's correct. I was unsure of the syntax.

onblur="this.className = 'deselected'"
onfocus="this.className = 'selected'"

in both select lists.

IE still isn't going to get along with you. It won't change the "empty"
lines background color (even though it will set them initially).

What you could do to get around that is to change the size of the select
list every time something is added or removed.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Bosconian]

"Randy Webb" <Hi************@aol.com> wrote in message
news:Hd******************************@comcast.com. ..

Bosconian said the following on 5/3/2006 1:12 PM:

Rather than changing the background of each individual option, change
the background color of the select itself. Thats if I am reading what
you wrote correctly.

Yes, that's correct. I was unsure of the syntax.

onblur="this.className = 'deselected'"
onfocus="this.className = 'selected'"

in both select lists.

IE still isn't going to get along with you. It won't change the "empty"
lines background color (even though it will set them initially).

What you could do to get around that is to change the size of the select
list every time something is added or removed.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -

http://www.JavascriptToolbox.com/bestpractices/

Randy,

Thanks for your reply.

I've been experimenting since my last post and have discovered just that: IE
will change the background color of all "empty" options until a single
option is added.

I would prefer not to dynamically change the size of the multiple-selects so
what about changing the border style instead?

[Bosconian]

"Randy Webb" <Hi************@aol.com> wrote in message
news:Hd******************************@comcast.com. ..

Bosconian said the following on 5/3/2006 1:12 PM:

Rather than changing the background of each individual option, change
the background color of the select itself. Thats if I am reading what
you wrote correctly.

Yes, that's correct. I was unsure of the syntax.

onblur="this.className = 'deselected'"
onfocus="this.className = 'selected'"

in both select lists.

IE still isn't going to get along with you. It won't change the "empty"
lines background color (even though it will set them initially).

What you could do to get around that is to change the size of the select
list every time something is added or removed.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -

http://www.JavascriptToolbox.com/bestpractices/

So switching the color shift from background to border works great in
Firefox, but not IE.

onfocus="this.className = 'selected'"

..selected {
border: 2px solid #FF0000;
}
..deselected {
border: 2px solid #FFFFFF;
}

Is there another cross-browser compatible way to change the border color of
a multiple-select other than resorting to something like

onfocus="this.style.borderColor='#FF0000'"

I'd prefer to define all my styles as classes.

[Bosconian]

"Bosconian" <bo*******@planetx.com> wrote in message
news:R4******************************@comcast.com. ..

"Randy Webb" <Hi************@aol.com> wrote in message
news:Hd******************************@comcast.com. ..

Bosconian said the following on 5/3/2006 1:12 PM:

> Rather than changing the background of each individual option, change
> the background color of the select itself. Thats if I am reading what
> you wrote correctly.

Yes, that's correct. I was unsure of the syntax.
onblur="this.className = 'deselected'"
onfocus="this.className = 'selected'"

in both select lists.

IE still isn't going to get along with you. It won't change the "empty"
lines background color (even though it will set them initially).

What you could do to get around that is to change the size of the select
list every time something is added or removed.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -

http://www.JavascriptToolbox.com/bestpractices/

So switching the color shift from background to border works great in
Firefox, but not IE.

onfocus="this.className = 'selected'"

.selected {
border: 2px solid #FF0000;
}
.deselected {
border: 2px solid #FFFFFF;
}

Is there another cross-browser compatible way to change the border color

of a multiple-select other than resorting to something like

onfocus="this.style.borderColor='#FF0000'"

I'd prefer to define all my styles as classes.

I've discovered that likewise the previously defined border styles work just
fine in Firefox, but not IE. Any suggestions for a workaround?

[Bosconian]

"Bosconian" <bo*******@planetx.com> wrote in message
news:09******************************@comcast.com. ..

"Bosconian" <bo*******@planetx.com> wrote in message
news:R4******************************@comcast.com. ..

"Randy Webb" <Hi************@aol.com> wrote in message
news:Hd******************************@comcast.com. ..

Bosconian said the following on 5/3/2006 1:12 PM:
>> Rather than changing the background of each individual option, change >> the background color of the select itself. Thats if I am reading what >> you wrote correctly.
>
> Yes, that's correct. I was unsure of the syntax.
>
>

onblur="this.className = 'deselected'"
onfocus="this.className = 'selected'"

in both select lists.

IE still isn't going to get along with you. It won't change the "empty" lines background color (even though it will set them initially).

What you could do to get around that is to change the size of the select list every time something is added or removed.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

So switching the color shift from background to border works great in
Firefox, but not IE.

onfocus="this.className = 'selected'"

.selected {
border: 2px solid #FF0000;
}
.deselected {
border: 2px solid #FFFFFF;
}

Is there another cross-browser compatible way to change the border color

of

a multiple-select other than resorting to something like

onfocus="this.style.borderColor='#FF0000'"

I'd prefer to define all my styles as classes.

I've discovered that likewise the previously defined border styles work

just fine in Firefox, but not IE. Any suggestions for a workaround?

I'm now thinking that it will be easier to simply wrap each select in a div
and change the border color & size as desired.