How to increase the size of the checkbox?

  • culturabicicleta
    Asked on July 4, 2025 at 9:40 AM

    Greetings:


    When I open this form in phone version (iphone) it does not allow me to make the single selection due to the size of the button. Please assist as I dont know how to work CSS

    This is what I'm using

    .p_checkbox {

      transform: scale(1.8) !important;

      z-index: margin: 3 1 1;;

    Jotform Thread 28653631 Screenshot
  • Raymond JotForm Support
    Replied on July 4, 2025 at 10:08 AM

    Hi culturabicicleta,

    Thanks for reaching out to Jotform Support. Before applying some CSS codes, I suggest moving the multiple choice field option to the one with the label first. Let me show you how:

    1. In Form Builder, click on the Multiple Choice field, and on the Gear icon under it.
    2. Next, click on the Options tab on the right, and add the other option.
    3. Click on the Advanced tab and Disable the Shrink option.
    4. Right-click on the other Multiple Choice field and click the Hide option.
      How to increase the size of the checkbox? Image 1 Screenshot 50


    1. First, copy this code:

    /* increase checkbox size - 28653631*/
    .form-checkbox:checked + label:before, .form-checkbox+label:before {
      transform: scale(1.8);
      align-self: anchor-center;
    }

    .form-checkbox:checked+label:after {
      transform: scale(1.8);
    }
    @media screen and (max-width: 480px) {
      .form-checkbox-item {
        padding-bottom: 10px;
    }
    }
    /* Ends here */

    2. Next, in Form Builder, click on the Paint Roller icon on the right and click on the Styles tab on the Form Designer menu.

    3. Then, scroll down to the Inject Custom CSS box and paste the codes there.

    How to increase the size of the checkbox? Image 2 Screenshot 61

    This is how it would appear:

    How to increase the size of the checkbox? Image 3 Screenshot 72

    How to increase the size of the checkbox? Image 4 Screenshot 83

    That's it. Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

    Give it a try and let us know if you need any help.