How can I add sublabels to the Image Checkboxes widget?

The reason I'm asking is I want the font of the Sublabel to be different from the font of the image Title.  In the screenshot above, I just typed "Title Sublabel" in the image Title.

If it's not possible to add sublabels, is there a way to change the font of different words in the image title?

Hi! Image title are the only text that you can have for your checkboxes. You can use CSS code to modify the font size, color, family etc.

- If it's not possible to add sublabels, is there a way to change the font of different words in the image title?

Looks like, it is possible using CSS content and nth-child properties. Please have a look at this demo form that I prepared for this purpose: https://form.jotform.com/201680792537057

The code implemented in the above example is: https://pastebin.com/73aS2qcg

You can implement this code (with your modifications) in your form for your Checkboxes widget using these instructions: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

I hope this helps. For further queries, feel free to write back to us.

Hi Patrick,

Thanks for your quick and great response. I thought this is not possible, but you found a way to do it! Now I know CSS content property and the selectors after and nth-child.

Just a follow-up question. Is it possible to inject the CSS code in the form itself instead of injecting it inside the widget? If yes, please show me the syntax (given the widget id).

I have multiple Image Checkboxes widgets in a form. I wish to put the CSS codes in one place so that it will be easier for me to edit the sublabels when needed. Thanks :)

Hello! I am glad to know that helped.

- Just a follow-up question. Is it possible to inject the CSS code in the form itself instead of injecting it inside the widget? If yes, please show me the syntax (given the widget id).

Unfortunately, no. You'll have to inject this CSS code separately for every widget. This is because every Image Checkbox widget runs in its own iFrame. iFrames do not share scripts and styles from the parent page.

The CSS you implement for these widgets are applied individually to the iFrame you apply it to.

I hope this helps. For further queries, feel free to get back to us.

Thank you for your answer. I understand.

You are most welcome.

If you have any other questions or concerns in future, please do not hesitate to reach out again.

In order to avoid confusion, I moved your last question to a separate ticket here:

https://www.jotform.com/answers/2397010-After-injecting-the-sublabels-CSS-code-the-spacing-between-the-images-are-no-longer-the-same

I will reply to that ticket shortly.