Need help styling the checkmark of a checkbox field

for form : 0357826484163   for checkbox item #209

1) how to change the color of the checkmark to #851515 

2) how to make it thinner checkmark... it is too thick. 

I have looked up how to. I even created my own form with proper CSS, but not working on jotform custom css. 

Please advise. 

Please inject the CSS codes below to your form to meet the requirements that you described.

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

    background-color: #851515 !important;

    box-shadow: 0 3px 0 0 #851515, 3px 3px 0 0 #851515, 6px 3px 0 0 #851515, 9px 3px 0 0 #851515, 12px 3px 0 0 #851515, 8px 6px 0 0 rgba(255, 255, 255, 0), 10px 1px 0 0 rgba(255, 255, 255, 0) !important;;

}

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

    width: 3px !important;

    height: 3px !important;

}

To inject CSS codes to your form, please follow the instructions in this guide — How-to-Inject-Custom-CSS-Codes

If you have other questions or concerns, please feel free to let us know.

Thank you.  

Could you point me to a doc which will explain the long sequence box-shadow code.

The checkmark of the checkbox was just created using a rotated (after) pseudo element with box-shadow.

We do not have a guide that explains how the box-shadow is created, but I hope the information in this article will help — http://www.css3.info/preview/box-shadow/ (See Layering Multiple Shadows)

If you have any further question, please feel free to let us know.