Colorful Select Lists

To display color in the select list and retain the color after selection requires 2 steps.  This approach works best if you have a static LOV.  In my case the LOV has 3 choices, Low, Medium and High and the Medium and High choices fonts are colored.  You could use this method to change the background color as well.

To display color in the select list you’ll need to add the following code to the Post Element Text of your select list:

document.getElementById("P9_PRIORITY")[0].style.color = "black"; 
document.getElementById("P9_PRIORITY")[1].style.color = "#E86D1F"; 
document.getElementById("P9_PRIORITY")[2].style.color = "red"; 

My select list is ordered so that ‘Low’ is first.

To retain the color after a selection is made, create a dynamic action on the change of your select list that executes the following javascript code:

if ($v("P9_PRIORITY") == 'HIGH'){ 
 $("#P9_PRIORITY").css({"color":"red"}); 
} else if ($v("P9_PRIORITY") == 'MED'){
 $("#P9_PRIORITY").css({"color":"#E86D1F"}); 
 }
 else {$("#P9_PRIORITY").css({"color":"black"}); 
 }

This method is a different than what is used to color the list.  In this case I do need to specify what color I want for each value in the select list.  If you don’t specify a color for each value, when a selection is made it will remain the color of the previously selected value.

Please note, if using Internet Explorer, the color will not change after selection until you navigate away from the item.

You can access the demo application here (credentials guest/demo): Colorful Select Lists Demo