Change Checkbox Item Style, Size & Appearance

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. 

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.

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

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.

Brilliant! It works great! Thank you indeed! 

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