Cacher is the code snippet organizer for pro developers

// CUSTOM HTML

    <span class="checkbox-container">
      <input type="checkbox" value="None" id="checkbox1" name="check" checked />
      <label for="checkbox1"></label>
    </span>


    .checkbox-container { background: #f00; width: 15px; height: 15px;     display: inline-block; position: relative; margin: 0; }
    .checkbox-container label { width: 13px; height: 13px; background: #fff;     cursor: pointer; position: absolute; left: 1px; top: 1px; }
    .checkbox-container label:after { width: 11px; height: 11px;     background: #00f;    top: 1px; left: 1px; content: ''; position: absolute; opacity: 0; }
    .checkbox-container label:hover::after { opacity: 0.3; }
    .checkbox-container input[type=checkbox] { visibility: hidden; }
    .checkbox-container input[type=checkbox]:checked + label:after { opacity: 1; }
    


// GRAVITY FORMS
    
    <li class="gfield checkbox-container">
        <label class="gfield_label"></label>
        <div class="ginput_container ginput_container_checkbox">
            <ul class="gfield_checkbox" id="input_2_8">
                <li class="gchoice_2_8_1">
                    <input type="checkbox"  id="choice_2_8_1" tabindex="5">
                    <label for="choice_2_8_1" id="label_2_8_1">Contact me with more information</label>
                </li>
            </ul>
        </div>
    </li>
    
    .checkbox-container > div > ul > li {    display: inline-block; position: relative; margin: 0; }
    .checkbox-container > div > ul > li label { padding: 0 0 0 2px;    cursor: pointer; }
    .checkbox-container > div > ul > li label:before { width: 15px; height: 15px; border-radius: 2px; border: 1px solid #afafaf;     left: 1px; top: 3px; content: ''; position: absolute; opacity: 1; }
    .checkbox-container > div > ul > li label:after { width: 17px; height: 6px;     border-left: 3px solid $green; border-bottom: 3px solid $green; transform: rotate(-45deg);   top: 0; left: 3px; content: ''; position: absolute; opacity: 0; }
    .checkbox-container > div > ul > li label:hover::after { opacity: 0.3; }
    .checkbox-container > div > ul > li input[type=checkbox] { visibility: hidden; }
    .checkbox-container > div > ul > li input[type=checkbox]:checked + label:after { opacity: 1; }