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

  • Profile Image
    lironuri
    Asked on August 10, 2014 at 03: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!

  • Profile Image
    EltonCris
    Answered 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_209with 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!