html - 将 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

使用您当前的 DOM 结构，您可以使用以下代码段:

.grunion-field-label {
  position: relative;
  display:inline-block;
  padding-left:10px;
  line-height:30px;
}

.grunion-field-label::before {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
  content:"";
}

.grunion-field-label input[type="checkbox"] + span::after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.grunion-field-label input[type="checkbox"] {
  visibility: hidden;
}

.grunion-field-label input[type="checkbox"]:checked + span::after {
  border-color: #f00;
  opacity: 1;
}

<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>