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

  • Profile Image
    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:


    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
    Answered on August 10, 2014 at 10:25 AM


    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.

    *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.