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

 

[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:

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.

 

[Bosconian]

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

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.

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]

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

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.

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]

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]

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.