Image Radio Widget: How to customize the image border?

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

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!

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)

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)

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!

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

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!

Perfect! Thank you so much Ashwin.

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!

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.