mardi 25 février 2020

How to change label styling on checkbox :checked

I'm currently building a form that has checkboxes wrapped inside of labels. We are doing this because we need to swap our the original checkbox for an image. However, when the checkbox is checked, we need to make the label have a border to give some user feedback.

Here is the setup of the labels/checkboxes

<div class="one_column">
    <label for="fieldname2_1_cb0">
      <input name="fieldname2_1[]" id="fieldname2_1_cb0" class="field depItem group  required" value="Alloy Wheel(s)" vt="Alloy Wheel(s)" type="checkbox"> <span>Alloy Wheel(s)</span>
    </label>
</div>

We have tried going about is using the following but obviously doesn't work

label input[type="checkbox"]:checked + label {
border: 5px solid blue;
}

Any help would be appreciated!




Aucun commentaire:

Enregistrer un commentaire