Single Choice element: How to change the color of each option?

Hi

Thanks for the information about CSS coding in Jotform above. I want to be able to change the color of each option in only one of our single choice form elements (not all) to help define the options. Is there a way to do this?

Hi Milestone Group,

Thanks for reaching out to Jotform Support. Can you please share the form URL in question and the name of the field?

Once we hear back from you, we'll be able to help you with this.

Hi

Thanks for responding.

The form URL is: https://form.jotform.com/232696971239874

Question name is: Please select the Booster KiwiSaver Scheme fund you wish to invest your KiwiSaver into

Any other information you need to answer my query please let me know.

Thanks

Hi Milestone Group,

Thanks for getting back to us. You can inject the following CSS code to change the color of each option in the "Please select the Booster KiwiSaver Scheme fund you wish to invest your KiwiSaver into" field:

label#label_input_54_0 {

  color: red !important;

}

label#label_input_54_1 {

  color: blue !important;

}

label#label_input_54_2 {

  color: green !important;

}

label#label_input_54_3 {

  color: purple !important;

}

label#label_input_54_4 {

  color: orange !important;

}

You can change the color to your liking. Here's the result:

Let me show you how to inject the CSS code:

• Open the Form in the Form Builder.
• Go to the Form Designer from the top left of the page.
• Select Styles from the Form Designer tab.
• Paste the above code in the Inject Custom CSS space.

Let us know if there’s anything else we can help you with. 

Thanks Rica. Perfect.

Quick question, I'm assuming it is the same process for changing the wording text colour for multi selection form elements? Don't need it right now but guessing now that I can do this with our forms it will be requested for other question types. I did see in one of your threads/training articles that there is a different process for inserting CSS code into widgets.

Regards

Hi Jeanine,

Thanks for getting back to us. If you'd use a similar field, then the process will be the same. But if you will use widgets, then yes, the CSS code will be directly inserted to the widget and will have a different CSS code as well.

Keep us updated and let us know if you need any more help.