How to make check boxes bigger?

  • Profile Image
    imoade
    Asked on October 11, 2016 at 03:00 PM
    Also is there a way to manipulate the check boxes, make them bigger? etc glow 
  • Profile Image
    Kevin_G
    Answered on October 11, 2016 at 03:37 PM

    I can see the sample form that was provided on the other thread, here is the link: https://form.jotform.com/62832768455972 

    Please do note that the fields displayed in the table are not check boxes, they are radio buttons that are  being displayed as check boxes; however, you may increase their size by following the steps below. 

    To make the radio buttons bigger you may inject this CSS code: 

    input[type="radio"] {

        width: 20px;

        height: 20px;

    }

    If you would like to increase the check box size as well (like the field displayed at the very bottom of your form) then you only need this code: 

    input[type="checkbox"] {

        width: 20px;

        height: 20px;

    }

    This way you will increase the radio buttons (with check box layout) size, here is how the result should be:

    However, as you can see on the screenshot above the check boxes options overlap the check box at the very bottom of the form, this is why you will need to increase the check boxes container to properly display the table and the check box below it, this code will help with that: 

    li#id_7 {

        height: 235px;

    }

    This way you will have your form properly displayed and the radio buttons sizes increased:

    This guide will help to inject the CSS code: How-to-Inject-Custom-CSS-Codes

    If you have any question, please let us know.