changing background color of multiple select

B

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!
 
B

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';
}
 
R

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

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

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

Bosconian

Randy Webb said:
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?
 
B

Bosconian

Randy Webb said:
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.
 
B

Bosconian

Bosconian said:
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?
 
B

Bosconian

Bosconian said:
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top