-
lironuriAsked on August 10, 2014 at 3:10 AM
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!
-
Elton Support Team LeadReplied on August 10, 2014 at 10:25 AM
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!