Why custom CSS code is not applied on preview mode?

I have been referencing this post https://www.jotform.com/answers/1052968-Clever-Colorful-Theme-Copy-fields-styling-doesn-t-copy-though   is order to get this theme to copy the formatting to each field.  It works correctly in the 'build' environment, however, when I preview or publish, all of the fields either revert to their original formatting or become completely white.

I have checked your form and I can see the form is showing the same on the form builder as well as the direct link. 

Here are some screenshots about it: 

Please, do note that you need to apply the code based on the fields on your form, you could get the ID of each field by right clicking on it and copying the value in the "id" attribute. 

On your form there is some code applied to fields that do not exist in the form, for example, the "id_10" and "id_12" do not exist. 

Please, try applying the code to the correct field ID and let us know  how it goes. 

Sample code, it can be customized: 

#fieldID {

 

    width : 460px;

 

    margin : auto;

 

    -webkit-border-radius : 10px;

 

    -moz-border-radius : 10px;

 

    border-radius : 10px;

 

    background : rgb(0,183,229);

 

    background : -moz-linear-gradient(top,  rgba(0,183,229,1) 0%, rgba(0,183,229,1) 100%);

 

    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,229,1)), color-stop(100%,rgba(0,183,229,1)));

 

    background : -webkit-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

 

    background : -o-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

 

    background : -ms-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

 

    background : linear-gradient(to bottom,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

 

    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7e5', endColorstr='#00b7e5',GradientType=0 );

 

}

Hope this helps. 

thank you for the information. I think what you are seeing is what happens when i publish the form. The customizations get stripped away...   I did as you mentioned above, and replicated it again.  I didn't complete the whole form, but made an example id_12 and attributed it to the email, phone, and birthdate fields.

In the build area, the form looks like this:

 

In preview and publish, it looks like this:

In addition, in cases where the form did automatically put a color background (e.g. student name), it will default back to the original color.  i did not change it this time, but in the past, if i changed 'student name' to id_12 (green), it was green in the build area but it showed as blue once published.

 

https://form.jotform.us/71707577805162

Thank you for the additional information. 

I've cloned your form now and I can  see this is the only code in the form: 

I have added code that affects the "Student E-mail", "Phone number" and "Birth Date" fields, it seems to work on my end and I even tried closing the form, logging out, logging-in using incognito mode and the CSS code I injected was still there. 

I would suggest you to try with the same code I injected on my end, it is a simplified version that simply changes the background color and sets the dimensions: 

#id_6 {

    width : 460px;

    margin : auto;

    -webkit-border-radius : 10px;

    -moz-border-radius : 10px;

    border-radius : 10px;

    background : rgb(135, 209, 15);

}

 

#id_25 {

    width : 460px;

    margin : auto;

    -webkit-border-radius : 10px;

    -moz-border-radius : 10px;

    border-radius : 10px;

    background : rgb(135, 209, 15);

 

}

 

#id_24 {

    width : 460px;

    margin : auto;

    -webkit-border-radius : 10px;

    -moz-border-radius : 10px;

    border-radius : 10px;

    background : rgb(135, 209, 15);

}

Also, may be that the default code in the form is overriding the injected one so it may be required to add "!important" in order to force the code to be applied, example: 

#id_24 {

    width : 460px !important;

    margin : auto !important;

    -webkit-border-radius : 10px !important;

    -moz-border-radius : 10px !important;

    border-radius : 10px !important;

    background : rgb(135, 209, 15) !important;

}

You can see my cloned form where I injected the code here: https://form.jotformpro.com/71716529675972 

Feel free to clone it: How-to-Clone-an-Existing-Form-from-a-URL

Please, make sure you are saving the changes on your form before you reload the page or preview the form: 

Let us know how it goes. 

ah! got it. i was doing things backwards. i'll give this a try.