Masked Checkboxes in enrollment

The markup below is for green checkboxes usually associated with dependent, plan compare, and agreement checkboxes. Please use this sparingly.

Please note, the checkbox input is hidden and is replaced with an image using pseudo classes. Make sure to wrap the input and label with the class checkbox-masked or the checkbox will not be visible!

Regular (small) checkboxes

HTML
<div class="checkbox-masked">
    <input type="checkbox" name="" id="input1" checked="checked" />
    <label for="input1" class="checkbox-label">checkbox label</label>
</div>

Medium checkboxes

HTML
<div class="checkbox-masked">
    <input type="checkbox" name="" id="input2" checked="checked" />
    <label for="input2" class="checkbox-label medium-box">checkbox label</label>
</div>

Large checkboxes

HTML
<div class="checkbox-masked">
    <input type="checkbox" name="" id="input3" checked="checked" />
    <label for="input3" class="checkbox-label large-box">checkbox label</label>
</div>