How to change a colour of a particular field?

How do I change the font color of one or more fields without changing the rest of the fields?

Hi,

You would have to find the unique ID of the fields which colour you would like to change. For example, I injected the following custom CSS code to change this label:

#label_28 {

color: blue!important;

}

And this code to change the colour of the input below:

#input_14 {

color: red!important;

}

Please refer to this guide for more information about finding Fields IDs on your own, and this guide about injecting custom CSS.

Should you need any more help with that, please let us know.

Regards,

I am having trouble finding the label number for the single choice element that I want to change the question color. The single choice element is toward the end of this form https://www.jotform.com/build/212039121687049 I want to make the circled text red.

It may also be that I didn't get the custom CSS code correct? In either case, I appreciate the help.

Hi,
Please add this code to your form:

#label_66 {

color: red!important;

}

Regards,

Perfect! Now how do I modify the code if I want to use the hex code for color so it's still red but not the bright red?

Still on this form, what is the CSS code to change the background of widgets? See below where the four white color field do not match the gray one. Thanks!

Hi,

You can just change red to your HEX code, or even rgba:

#label_66 {

color: HEX_CODE!important;

}

Regarding the widgets, would you like to change the other inputs to grey, or the grey one to white?

Regards,

The other inputs to grey (or some other color in the future). Thank you again!

Another color issue came up, see below where I am using the Infinite List widget and the text in the circle is hard to see against the background:

Can the color of that text be changed?

Hi,
Please add this code to your widget settings:

#maskedInput {

 background: #838895!important;

 box-shadow: none;

 border:none;

}

That works. In case my last edit didn't come up, please see below.

Another color issue came up, see below where I am using the Infinite List widget and the text in the circle is hard to see against the background:

Can the color of that text be changed?

Hi,

I can see you have already fixed this issue.

Is it working as you would like it to? Or is there something else you'd like changed?

Regards,

No, that issue is not fixed. The text that I circled shows up when you are actually using the form, not in the builder. You can see it after enter some text in the boxes and hit save when using Preview Form.

I also tested the CSS code to change color on two other widgets (Dynamic Dropdowns and Infinite List) but they don't work on them. Why is that?

Hi,

Could you please send us a screenshot? This is what we are seeing in the preview:

Regarding the other issue.
Instead of #DynamicDropdown please use #select2-twsw-container, and instead of #infiniteList please use #listContainer.

Regards,

Changing #DynamicDropdown to #select2-twsw-container had no effect. Changing #infiniteList to #listContainer changed the background of the field but not the inside.

The top one uses #listContainer, the bottom uses #infiniteList.

The above also shows the other issue. You have to hit the save button for the additional text to show up.

Hi,
It seems like id of the Dynamic Dropdown is generated every time the page is refreshed, so we need to use its class (which is constant) .select2-selection__rendered (please remember about the dot).

Regarding the other fields, please try this code:

#listContainer input[type="text"] {

background: #838895!important;

 box-shadow: none;

 border:none;

}

Regards,

The first one is still not working even with the CSS code like this:

The second works, thank you. But there is still the matter of changing the color of the text that I've circled so it stands out better from the background gray:

Thank you so much for your time, Igor!

Hi again,

Please remove the first "#" before the "." in the CSS code provided my colleague.

As per the color issue, kindly inject the following CSS code into the two widgets:

.col1, .col2{

color: white !important

}

Result in a demo form:

https://form.jotform.com/212051983673963

I hope I have been of any help.

Much thanks, Amin, and to Igor as well!