What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I change the CSS style of the captions on the Image picker widget?

    Asked by oppgraphics on March 02, 2016 at 09:54 AM

    I see that I can add custom CSS code to the widget but I don't know the proper element to use that connects to the captions specifically. I've found that I can style the captions within the captions brackets using span style but this blocks conditions from working.

     

    Please help.

    style image picker image picker widget
  • Profile Image

    Answered by Ben on March 02, 2016 at 12:09 PM

    I presume that this is the form where you want to change this: http://www.jotformpro.com/form/60553452882964 and looking at its setup, the captions seem to have the following style:

    font-size: 8px;
    padding: 0px;
    10px 0px 0x;

    - This is likely the reason why the conditions did not work

    Please do notice that the value for the padding is set to 0px and then closed, followed by a value of 10px 0px 0px; - meaning that there will be issues parsing that as CSS.

    This means that the following is not valid:

    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Gray</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gray.png
    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Blue</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_blue.png
    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Gold</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gold.png
    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Custom</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/custom.jpg

    However to change the CSS for the element as you have asked, you should add the following (instead of the text above) into Images field:

    [Gray]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gray.png
    [Blue]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_blue.png
    [Gold]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gold.png
    [Custom]http://www.dealer-max.com/images/template_a_assets16/lro-webform/custom.jpg

    and then add the following to the Custom CSS field:

    .imageLabel {
      font-size: 8px;
      padding: 0px;
    }

    You can see how this works on a clone of your form: https://form.jotform.com/60614904884966

    I have applied the same approach on other Image Picker widgets as well.

    Do try it out and let us know how it goes. Also feel free to add any other CSS codes to the imageLabel rule and you will re-style the caption accordingly.