How to Change colors within fields/widgets

Hello Jotform, I have a form where I need to edit some colors of fields that I can't figure out how to do. I have all the hex codes I need for the colors, I would just need to know where to input it/if it requires a CSS code to change. I have included a link to a PDF (because I couldn't attach a PDF or multiple files) with detailed questions about each specific screenshot of the form: https://drive.google.com/file/d/1ih6dFqxQpF3hlC4RlpjgF2jVtYWfvKws/view?usp=sharing

Let me know if you need any more clarification!

Hi there,

Thank for contacting support!

Please paste the following code under Inject Custom CSS option:

.form-address-table {

 background-color: orange;

}

.form-checkbox+ :before{

background-color: orange !important;

}

Paste the following code under Custom CSS option given in widget:

label.checkbox {

  background-color: white;

  color: blue;

}

Below are useful guides for injecting custom css code:

https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

https://www.jotform.com/help/428-how-to-inject-css-codes-to-widgets/#:~:text=Open%20the%20Widget%20Settings%20by,button%20to%20save%20your%20changes.

I hope that explains it. Please contact us again if we can help in any way.

Thank you very much! I really appreciate it. I've decided that the grey highlight looks better than the orange for the personal information field so I left that as is. But now I know the code to change it!

Two more small things: The single selection (circular) options are still grey, can I have the code to change the circles to orange? On Page 6 the terms and conditions acceptance text is grey and not very visible. Can I have the code to change the text to white?

Hi there,

Thank you for coming back to us!

Please paste the following code under Inject Custom CSS feature.

.form-radio+span div:after {

 background-color: orange;

}

Paste the following code under Custom CSS option given in widget:

#_label {

 color: white !important;

}

I hope that explains it. Please contact us again if we can help in any way.

Thank you again. You have been incredibly helpful. I am still noticing a small issue with the single choice options though. While they look orange in the builder, they are grey in preview and publish mode. (I think the grey selection highlight might be overriding the orange.) Is there any way to fix that? If not, I'm sure we'll be ok, as the form still looks cohesive with the grey.

Happy to help you!

Please give it a try under  Inject Custom CSS option:

.form-radio+span div:after {

 background-color: orange !important;

}

I await your response.

Thank you. I tried that but it is not working. The image below is how it looks while making the selection and then after the selection is made.

Please paste the code given below under Inject Custom CSS:

.form-line-active {

background-color: orange !important;

}

When the field is checked it will appear with orange background.

Ok, I really like the orange highlight. It's great. Not to bother you even more, but for the single choice questions (not the checkbox ones) with an "other" option where registrants can write their own text, the highlight doesn't show. Should I put the same CSS code into those widgets or is it a new code I need? Screenshot below for context.

Hi,

You can paste the following code:

.form-radio+label:before {

 background-color: orange !important;

}

Please let us know if there is anything else we can help you with, we are always here to provide support

Thanks a million! I am going to review the form with my supervisor. I will keep the thread open just in case we need to make other changes.

You have made this process incredibly smooth and I appreciate all your help.