How to style specific collapse field in the form?

I have a similar question that relates to this thread: https://www.jotform.com/answers/1260619-How-to-customize-section-collapse-button-

How can individual section collapse be styled differently instead of styling each collapse the same?

To be able to style certain element in the HTML (in your form) you have to target the specific ID of the collapsing field, this guide might help: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

When you find the ID of the collapsing field you can then style it as needed. And you can do that with each collapse field separately.

Hope it helps.

Let us know how it worked.

Thank you!

Thanks,

Can you help me with sample css for:

id#_545

We will be glad to help you style the form collapse in your form using CSS. We just need more information from you in order for us to do so.

Can you tell us which of your forms are you currently working on, please? Also, can you tell us specifically which form collapse in that form would you want to style? And lastly, what style would you want to apply to that form collapse?

We will wait for your response.

 hello,

This form https://www.jotform.com/build/72888913702163

This form collapse: id#_545

I would like a background image (any image url place holder will work for now)

Thank you.

Please inject the following custom css code in your form to add background image in form collapse field:

div#collapse_545 {

    background-image: url(https://www.jotform.com/images/backgrounds/tileable_wood_texture.png);

}

The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hope this helps.

Do get back to us if you need any other changes.

Perfect,

Thank you!

Spencer

I ran into a problem.  I'm not sure if this is related to the css or something else.

I have implemented the following code:

div#collapse_545 {

    background-image: url(https://i.imgur.com/mtCdYIGt.jpg);

}

div#collapse_562 {

    background-image: url(https://i.imgur.com/if53eb1.jpg);

}
div#collapse_602 {

    background-image: url(https://i.imgur.com/5wUPscF.jpg);

}

The background images appear on the form builder.  However when I preview the form, the images for 562 and 602 do not appear.

Thank you,

Spencer

I checked your form, but I wasn't able to replicate this issue, the images are showing fine on preview:

Could you please double check and let us know if the issue persists?

Thank you!