style the normal radio button fields - remove the button so images are shown instead

Hi, I am trying to style the normal radio button fields, remove the button so images are shown instead.

Then, show a border color for selected images, just like the "image radio button" widget can do.

For example: http://www.jotformpro.com/form/42133891847966

I must use Radio Buttons, because i want to add the "price" field to each product..

So, what part of that code do I copy to my form to make it work?

Thank you!

Hi,

You can use the following CSS codes. Make sure to change the element ID as seen on the code below (e.g. #id_209) with the element ID you want to remove its radio buttons and highlight the image on selection.

#id_209 input[type="radio"] {

display: none;

}

input[type="radio"]:checked + label img {

border: 2px solid #CACACA;

box-shadow: 0 0 5px #B8B8B8;

border-radius: 10px;

}

Guide: How-to-Inject-Custom-CSS-Codes-to-your-Form

Here's how to get field ID number. https://www.jotform.com/help/146-How-to-find-Field-IDs-Names

*Note: You must use the li element ID that holds the field instead of the input field ID, so it should always start with #id_ followed by the number you found on the field properties.

Sample result:

If you need further assistance, let us know here.

Regards!