CSS: How to change the color of each option in the dropdown field?

Is there a way to make the drop down choices a different colour?

Like if the drop down menu has PASS or FAIL selected the box is GREEN if PASS is selected and RED if FAIL is selected.

Similar to below

Hello gazzbeckhotmailcom,

Thanks for contacting Jotform support. Yes, and we can achieve this by injecting a custom CSS code to your form. I see that you have multiple forms under your account, could you please share the link to your target form? That way, we can give you the exact CSS code that fits your needs.

Once we hear back from you, we'll be able to move forward with a solution.

https://form.jotform.com/240445833599871

Hello gazzbeckhotmailcom,

Thanks for getting back to us. Changing the color of the options from your dropdown field is easy. Let me walk you through it:

First, let's find the ID of the dropdown field you want to customize. You can find this ID in the Advanced section under the field's properties. For our example, we'll use the ID #input_148.

1. Now, to inject a custom CSS code to your form, copy the code below:

/*Changes the color of the dropdown options - 14167001*/

#input_148 option:nth-child(2) {

    background: red;

}



#input_148 option:nth-child(3) {

    background: blue;

}

/*End of code*/

 2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

Remember, you'll need to use the specific field ID that matches the dropdown you want to customize. You can test my demo form here or clone it to copy the changes made. Or, you can check out the screencast below to see my results:

Give it a try and let us know how it goes.

I cloned the form and I did it exactly the way you said in the same field as your example but no success

Hi Garry, 

Thanks for reaching out to Jotform Support. I checked your form and found that you haven't pasted the code as instructed by my colleague here. I also checked the cloned form that you created, and I can see that the dropdown field has different colors. Check out my screenshot below:

Can you try adding the code suggested by my colleague again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on.

Give it a try and let us know if you have any other questions.

My cloned form has no colours in that field.

Hi Garry,

Thanks for getting back to us. I checked your form and tested it to see if I could replicate the issue, but everything was working properly. Check out the screencast below to see my results: 

Can you try it again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on.