Need help styling the checkmark of a checkbox field

  • Profile Image
    stormingrobots
    Asked on February 08, 2018 at 09:18 AM

    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. 

  • Profile Image
    Mike_G
    Answered on February 08, 2018 at 11:16 AM

    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.

  • Profile Image
    stormingrobots
    Answered on February 08, 2018 at 11:50 AM

    Thank you.  


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

  • Profile Image
    Mike_G
    Answered on February 08, 2018 at 12:55 PM

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

    1518112345t12_50_01.png

    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.