View Full Version : SELECT object

01-28-2005, 11:14 PM
Hi... I am working on a selection menu that will allow me to send available items in a list to another list(selected items)...for this I am using the select list box object... I need the items to change color when the mouse is over them... the option object in the select list object does not have an onmouseover event... can somebody recommend a way to highlight the different items that are in the select list??? Thanks in Advance..


01-28-2005, 11:31 PM
could u use css to change the background color?

<option style="background-color:#0000FF;color:#FFFFFF;">blah</option>
<option style="background-color:#FF0000;color:#FFFFFF;">blah</option>
i dunno if that will suffice

01-29-2005, 01:42 AM
If you use styles, I recommend not doing them inline -- atleast do it in an external document.

If this is an 'option' drop down menu, you won't be able to change the color -- it's part of the software, most programs (IE maybe the exception) will ignore it.

If you want a list you can adjust, you can do something like on this site:

Top left corner -- that's not an 'option' drop down menu. It's a CSS menu that displays lists on hover. This techinque is in detail here:

That help?

01-29-2005, 03:16 AM
the option object in the select list object does not have an onmouseover event...

Yes it does.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>=- Page title -=</title>
<script type="text/javascript">
function addChildHover(elm, child, hoverColor, regColor) {
var parent = document.getElementById(elm);
var opts = parent.getElementsByTagName(child);
for (i=0; i<opts.length; i++) {
opts[i].style.color = regColor;
opts[i].onmouseover = function() {
this.style.color = hoverColor;
opts[i].onmouseout = function() {
this.style.color = regColor;

window.onload = function() {


<form action="/">
<select id="dropdown">
<option value="">Blah</option>
<option value="">Blah</option>
<option value="">Blah</option>
<option value="">Blah</option>
<option value="">Blah</option>


If you comment out the onmouseout bit then each option will remian pink (instead of turning back to purple).

As Brady said, the browser manufacturers have made the decision to dissallow styling of the currently focused <option>.

01-29-2005, 03:28 AM
although firefox does pick up the colors but not the text inside it would be useful if u were just using them to choose colors but in this case i dont that is the situation at hand