Formatting a checkbox

  • RFOneVision
    Asked on February 10, 2018 at 2:56 AM

    Could you please give me the code that will make the multiple-choice button below (the blue one), the same as the radio buttons?

    And is it possible to be a box shape (checkbox) rather than a round button?

    Thanks

    Jotform Thread 1379989 Screenshot
  • RFOneVision
    Replied on February 10, 2018 at 2:58 AM

    It would also look better if it is lined up with the buttons above, and aligned either with the top or middle of the text to its right ('If you're willing...').

    Tks

  • Mike_G JotForm Support
    Replied on February 10, 2018 at 8:11 AM

    Here are the CSS codes that you need to accomplish the requirements you mentioned above.

    .form-checkbox-item:not(#foo) label:before {

        display: none !important;

    }

    .form-checkbox-item:not(#foo) label:after {

        display: none !important;

    }

    .form-checkbox-item:not(#foo) input[type="checkbox"] {

        display: inline !important;

    }

    #label_input_94_0 {

        float: none !important;

        line-height:0px !important;

        text-indent: 0px !important;

        margin-left: -1px !important;

    }

    input#input_94_0 {

        margin: 0px 10px !important;

    }

    label#label_94 {

        margin-bottom: 18px !important;

    }

    Once the codes above are injected into your form, it will look like the image below:

    1518268228t08 09 59 Screenshot 10

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

  • RFOneVision
    Replied on February 10, 2018 at 8:23 AM

    Brilliant. Tks.