mardi 24 mars 2020

CSS - style checkbox of different format - normal CF7 checkbox

I have a Wordpress CF7 form which uses checboxes of two kinds, normal checkbox and acceptance checkbox. I used acceptance checkboxes, then it turned out I need more than 1 checkboxes, but this plugin supports only 1 acceptance box, hence I need to add a normal checkbox too.

So far I managed to style pretty well the acceptance checkbox, which has this code:

      <div class="checkbox2">
        <span class="wpcf7-form-control-wrap your-consent">
          <span class="wpcf7-form-control wpcf7-acceptance optional">
            <span class="wpcf7-list-item">
              <label class="container">
              <input type="checkbox" name="your-consent" value="1" aria-invalid="false" class="acceptance">
                <span class="wpcf7-list-item-label checkmark">&nbsp;</span>
                 </label>
            </span>
          </span>
        </span>
        <span class="checkbox-text">I consent</span></div>

    </div>

Now I am struggling to create new css for the normal checkbox. It has a different HTML structure, which I can't change.

      <div class="checkbox1">
        <span class="wpcf7-form-control-wrap checkbox-766 container">
          <span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required acceptance">
            <span class="wpcf7-list-item first last">
              <input type="checkbox" name="checkbox-766[]" value="I agree ">
              <span class="wpcf7-list-item-label">I agree to the privacy policy</span>
            </span>
          </span>
        </span>
      </div>

Can anyone help me to apply the code of checkbox2 to checkbox1?

It can be completely new css/scss, doesn't matter if it stops working for checkbox2. I will add it with a parent #id and both will work fine.

Here is the code in codepen.




Aucun commentaire:

Enregistrer un commentaire