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

    Image Radio Widget: How to customize the image border?

    Asked by art_crate on December 29, 2014 at 12:06 AM

    Hello, 

     

    I have a few simple customization questions regarding the image radio widget. 

    - How I can lighten the bounding box of the radio button?

    - How can I hide the Image Texts? I understand these are important for conditions, etc. I just want them hidden from the user, even if turning them white is the only way to do this.

     

     

    Thanks in advance!

    Chris

    Page URL:
    http://form.jotform.us/form/43520803942148?

    image radio image radio widget radio widget hidden thanks hello
  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 29, 2014 at 06:37 AM

    Hello Chris,

    Yes it is possible to achieve your requirement by adding the following custom css code in your form:

    To change the box of the images:

    li img {

    border: 1px solid #9B9B9B;

    }

    To hide the label of the images:

    label {

    visibility: hidden;

    }

     

    Please check the screenshot below on how to add this custom css code and the out of it:

     

    Please be noted that setting the visibility of the label will not have any impact on your condition related to "Image Radio Buttons" widget.

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by art_crate on December 29, 2014 at 05:21 PM

    Thank you so much!

    Exactly what I was trying to do.

     

    One more question, when the image is selected how do I edit the color of the blue selected box? (image attached)

     

  • Profile Image

    Answered by art_crate on December 29, 2014 at 06:53 PM

    Thank you so much!

    Exactly what I was trying to do.

     

    One more question, when the image is selected how do I edit the color of the blue selected box? (image attached)

  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 29, 2014 at 09:57 PM

    Hello art_crate,

    I am not sure if I have understood your question correctly. Do you want to change the color of image border or you want to change the check box color which appears in center?

    If you want to change the color of the border, changing the color in the below custom css code will change it:

    li img {

    border: 1px solid #9B9B9B;

    }

    If you want to change the blue checked box, unfortunately it is not possible  because it is part of the image which you have uploaded. Please check the screenshot below:

     

    Please check the screenshot of your image radio button widget where you have added these image for selected options:

     

    Hope this answers your query.

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

    Thank you!

  • Profile Image

    Answered by art_crate on December 29, 2014 at 10:04 PM

    Hi, I am referring to the blue outline box. See screenshot. The grey box turns blue when it is selected.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 29, 2014 at 11:15 PM

    Hello art_crate,

    Please add the following custom css code in your widget to change the border color:

    li.checked img {

    border: 3px solid #ededed;

    }

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by art_crate on December 29, 2014 at 11:38 PM

    Perfect! Thank you so much Ashwin.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 30, 2014 at 07:42 AM

    Hello art_crate,

    You are welcome.

    I'm very pleased that I was able to help you.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by refadmin on October 18, 2015 at 08:41 PM

    I want to make the label Text Bigger and more visible, this has been very tough, i have tried to use 

     

    li label {font-size: 18px;}  and many other variants to no avail. can you please assist me

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 19, 2015 at 12:07 AM

    Hi refadmin,

     

    I have moved your concern on a separate thread so we can better assist you. You can check the thread here: http://www.jotform.com/answers/684061. We will answer your concern on that thread accordingly.

     

    If you have any further questions, please feel free to contact us again by creating a new thread.
    Regards.