将CSS添加到HTML复选框

Question

我的网站遇到了一些问题。我想添加CSS到我的按钮像这样的东西，我发现在网上。https://codepen.io/allthingssmitty/pen/wjzvjo我无法为它添加ID，因为我无法更改HTML代码，因为它是由WordPress自动生成的。如有任何帮助，我们将不胜感激。

<label class='grunion-field-label checkbox'>
    <input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
    I agree to the Terms &amp; Conditions. <span>(required)</span>
</label>

Answer 1

您可以添加外部css来重新设置复选框的样式，而且您可能需要从JavaScript获得一些帮助。

null

(function($) {

  $('input[type="checkbox"]').on('click', function() {
    if ($(this).is(':checked')) {
      $(this).closest('label').addClass('checked');
    } else {
      $(this).closest('label').removeClass('checked');
    }
  });

})(jQuery);

.grunion-field-label.checkbox {
  position: relative;
  padding-left: 24px;
}
.grunion-field-label.checkbox input[type="checkbox"] {
  display: none;
}
.grunion-field-label.checkbox:before {
  content: " ";
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.grunion-field-label.checkbox.checked:after {
  content: " ";
  position: absolute;
  top: 4px;
  left: 8px;
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  width: 4px;
  height: 8px;
  transform: rotate(45deg);
}

.grunion-field-label.checkbox.checked:before {
  background-color: #0c0;
  border-color: #0c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class='grunion-field-label checkbox'>
    <input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
    I agree to the Terms &amp; Conditions. <span>(required)</span>
</label>