What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Change Checkbox Item Style, Size & Appearance

    Asked by gerttcm on May 11, 2016 at 10:30 AM

    Hello,

     

    Is there a way to change the border color of the actual tickbox for the checkbox and also it's size and apearance?

     

    Here is what it currently looks like, but I'd like it to look like the AFTER picture:

     

    BEFORE

    AFTER

     

    Thank you kindly. 

    Page URL:
    https://form.myjotform.com/61303028695555

    checkbox style size appearance
  • Profile Image
    JotForm Support

    Answered by beril on May 11, 2016 at 12:04 PM

    Can you try to add the following code?

    input[type="rcheckbox"] {

        border:2px solid;

        background-color: white;

     

        border-radius: 20px;

    }

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image

    Answered by gerttcm on May 12, 2016 at 02:34 AM

    No change sorry. I'm supposed to add it to the CSS right? If yes, then nothing happened. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 12, 2016 at 04:06 AM

    Please inject the css below to achieve your requirement. 

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

        background-color: #ffffff;

        border: 1px solid #828282;

        width: 60px!important;

        height: 60px!important;

        left: 0px!important;

        top: 0px!important;

        barder-radius: 0;

    }

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

        background-color: #274edd;

        box-shadow: 0 6px 0 0 #274edd, 12px 6px 0 0 #274edd, 30px 6px 0 0 #274edd, 5px 6px 0 0 #274edd, 24px 12px 0 0 rgba(0, 0, 0, 0), 12px 1px 0 0 rgba(0, 0, 0, 0);

        -moz-transform: rotate(-45deg);

        -webkit-transform: rotate(-45deg);

        -o-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

        transform: rotate(-45deg);

    }

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

        content: '';

        position: absolute;

        z-index: 10;

        display: inline-block;

        opacity: 0;

        top: 20px!important;

        left: 10px;

        width: 20px!important;

        height: 30px!important;

    }

    If you need further modifications to your form, please let us know.

  • Profile Image

    Answered by gerttcm on May 12, 2016 at 04:38 AM

    Brilliant! It works great! Thank you indeed! 

  • Profile Image
    JotForm Support

    Answered by beril on May 12, 2016 at 04:41 AM

    That's great! On behalf of my colleague, you're welcome. Feel free to contact us anytime.