Changing drop down list appearance

Question

I was wonder how I can add additional attributes to a drop down list. I would like to add a different color to each option in the box. Something similar to the following code:
<style type="text/css">
.bg1{background-color:FF0000}
.bg2{background-color:00FF00}
.bg3{background-color:0000FF}
</style>
<form action="" method="post">
<select name="foo">
     <option class="bg1">red</option>
     <option class="bg2">green</option>
     <option class="bg3">blue</option>
</select>
</form>
I can't seem to find were I can add this informaiton. Thank you in advance.

Answer 1

sorry about that, thomas. maybe it'd help if i read your post more closely before responding. anyhow, i had to get carl's help for this, but here are two ways to implement your request...
javascript approach: just drop in a jscript function that checks your option values and displays them as you'd like. so if you had a select list item, P2_DEPTNO, with an lov query like...
select dname, deptno from dept
...you could place this javascript...
<script language=JavaScript type=text/javascript>
<!--
var pThis = document.getElementById('P2_DEPTNO');
var pThose = pThis.getElementsByTagName('OPTION');
for(var i=0;i < pThose.length;i++){
/*change this logic for colors*/
if(pThose.value == "10"){
pThose[i].style.background = "#00FF00";
if(pThose[i].value == "20"){
pThose[i].style.background = "#996633";
if(pThose[i].value == "30"){
pThose[i].style.background = "#0000FF";
if(pThose[i].value == "40"){
pThose[i].style.background = "#FF0000";
//-->
</script>
...in the "Post Element Text" field of the item-level attributes page of your item.
style approach: i'm not a css pro, but if your users use browsers that are somewhat css compliant (not IE), you can use define a style like...
<style type="text/css">
<!-- .myColors{}
.myColors > option{background-color:#336699;}
.myColors > option+option{background-color:#FF0000;}
.myColors > option+option+option{background-color:#FFFF00;}
.myColors > option+option+option+option{background-color:#996633;}
.myColors > option+option+option+option+option{background-color:#669933;}
-->
</style>
...also in that "Post Element Text" field (or in your CSS, of course) and drop a...
class="myColors"
...into the "HTML Form Element Attributes" field on that same page.
hope this helps,
raj