Text color not changing for the sliders with calculated result widget

I am using the Sliders With Calculated Result widget and want to change up the design.

When using the custom CSS area, I am able to design the slider's text and have it appear correctly while in the "Build" section of the form creator.

But when I publish the form, the changes are not present and the html I add in is now gone.

Using td.label_row {color: red;} works when published, but I need to individually make the text on each slider a different color, so this does not work for me.

I think it is a matter of just adding in the sliderID but I am having trouble getting that to work.

Thanks

I have cloned your JotForm to my account and see that the widget is displaying the text normally on both edit and preview modes. As I check the custom CSS section of the widget, I see that there is no code added to change the color. Could you provide us with the CSS code that you are trying to add to the widget so that we can check it further?

Yeah there is no code in there as I have been changing and trying different things.

It works using td.label_row, I just need to know what to put if I want to specify the individual rows instead of all of them.

There is a sliderid="0" in the code, which is what I think I need, but dont know how to format the beginning of the code.

ie. td.label_row sliderid.0 {code}

Try with this code to target each label:

.sliderTable tr:nth-of-type(1) td.label_row   {

color: red;

}

.sliderTable tr:nth-of-type(2) td.label_row   {

color: blue;

}

.sliderTable tr:nth-of-type(3) td.label_row   {

color: green;

}

.sliderTable tr:nth-of-type(4) td.label_row   {

color: darkblue;

}

.sliderTable tr:nth-of-type(5) td.label_row   {

color: yellow;

font-weight: bold;

}

Result: https://form.jotformpro.com/72086437179970 

Let us know if you need anything else, we will be glad to assist you.

It works. Thank you very much

Any way to just get those circle letters in the colors while the rest of the text stays black?

Tried a <span> in the "General" settings, and again it works in the Builder but not when published.

Thanks

Remove the circle letters, and put them through this custom CSS code:

.sliderTable tr:nth-of-type(1) td:nth-of-type(1):before{

content: "Ⓤ " !important;

color: red;

}

.sliderTable tr:nth-of-type(2) td:nth-of-type(1):before{

content: "Ⓢ " !important;

color: blue;

}

.sliderTable tr:nth-of-type(3) td:nth-of-type(1):before{

content: "Ⓢ " !important;

color: green;

}

.sliderTable tr:nth-of-type(4) td:nth-of-type(1):before{

content: "Ⓦ " !important;

color: darkblue;

}

.sliderTable tr:nth-of-type(5) td:nth-of-type(1):before{

content: "Ⓘ " !important;

color: yellow;

}

Result: https://form.jotformpro.com/72086437179970