Is it possible to set the background-color of a specific option in a choice list?

uluerje · ‎06-04-2014

I have a choice list with red, green, yellow, and I need it to display the actual color instead of the word when the user expands the dropdown. If I can't accomplish this through modifying the CSS, would it be possible to use a macro in place of the field?

uluerje · ‎06-04-2014

No problem. Since it clears out the choice list onLoad, you have to grab the current value before it clears, then set the value back in after adding the options. I set the background color of the field at the end of the onLoad script and also with an onChange script. Here's part of the onLoad script...

g_form.clearOptions('u_risk_level');

var x = document.getElementById("u_deliverable.u_risk_level");

var option1 = document.createElement("option");

option1.text = "Green";

option1.name = "Green";

option1.value = "1";

option1.style.backgroundColor = '#32CD32';

option1.style.color = '#32CD32';

x.add(option1);

View solution in original post

Subhajit1 · ‎06-04-2014

Hi Jessica,

You can refer to this link How to change the color of background of a label within a form?? for pointers.

Thanks,

Subhajit

uluerje · ‎06-04-2014

Thanks for the link, however it doesn't give any info on how to change the background color of an option in a choice list. It would be nice if I could just add an id attribute to each option but I haven't found a way to do that yet. I have no problem changing the background color of the select box to match the selected value through an onChange script, however doing this applies the background color to all the options in the list (red, yellow), so if the user chooses "Green", the select box will change to green but then if the user expands the dropdown again to select a new value, they see "Red" with a green background. So what I want is to have the select box background color match the selected color and have a separate static background color for each option (e.g. "Red" with red background) I've researched this quite a bit so I'd be shocked if it's documented in the wiki or an easy fix. Any help is greatly appreciated!!!

uluerje · ‎06-04-2014

I finally got this to work with an onLoad script that first clears out the existing choice list and then adds each choice back in with a background color set.

Bhavesh Jain1 · ‎06-04-2014

You need not write any script. See my comment below