Image Radio Widget: How to customize the image border?

  • Profile Image
    art_crate
    Asked 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

  • Profile Image
    ashwin_d
    Answered 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
    art_crate
    Answered 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
    art_crate
    Answered 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
    ashwin_d
    Answered 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
    art_crate
    Answered 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
    ashwin_d
    Answered 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
    art_crate
    Answered on December 29, 2014 at 11:38 PM

    Perfect! Thank you so much Ashwin.

  • Profile Image
    ashwin_d
    Answered 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
    refadmin
    Answered 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
    Chriistian
    Answered 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.