...

View Full Version : SELECT object



MALI
01-28-2005, 10: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..


MALI

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

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

bradyj
01-29-2005, 12: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:
http://www.shauninman.com/

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:
http://www.alistapart.com/articles/dropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/

That help?

mindlessLemming
01-29-2005, 02: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">
<html>
<head>
<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() {
addChildHover('dropdown','option','#FF00CC','#CC00FF');
};
</script>
</head>


<body>

<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>
</select>
</form>

</body>
</html>


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

_Aerospace_Eng_
01-29-2005, 02: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum