Change Checkbox Item Style, Size & Appearance

  • Profile Image
    gerttcm
    Asked 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. 

  • Profile Image
    beril
    Answered 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
    gerttcm
    Answered 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
    Chriistian
    Answered 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
    gerttcm
    Answered on May 12, 2016 at 04:38 AM

    Brilliant! It works great! Thank you indeed! 

  • Profile Image
    beril
    Answered 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.