How to enlarge clickable area of radio button?

  • Profile Image
    Schwob
    Asked on August 10, 2016 at 04:25 AM

    it´s often difficult to catch the little button when clicking. Can i enlarge the clickable area including the radio butto description text, like in html with spanning it in <label> ... </label>?

     

  • Profile Image
    Chriistian
    Answered on August 10, 2016 at 05:21 AM

    You can inject the custom CSS code below to enlarge the area of checkbox and radio buttons. You can also change the value of the yellow highlighted text to modify the size of the radio button based on your preference.

    .form-checkbox-item input, .form-radio-item input {

        height: 20px !important;

        width: 20px !important;

    }

    You should be able to click on the radio button or on the label of the radio.

    If you need further assistance, please let us know. 
    Regards.

  • Profile Image
    grade4pagasa
    Answered on August 10, 2016 at 06:15 AM

    Like what Schwob asked, I would also like to know if the entire radio button label can be made to a clickable area. Thanks. 

    Update

    After using a form even with no scripts (fig. 1), I found out that the labels are clickable (fig. 2) :) 

    So, there's no need to add the script, then? 

    Thanks.

     

    fig. 1

     

     

    fig. 2 - labels are clickable even with no scripts added

  • Profile Image
    Schwob
    Answered on August 10, 2016 at 07:04 AM

    Hello Chriistian,

    thank you for the extreme fast answer. It work´s perfectly and made me very happy! ;-)