添加CSS到HTML复选框

我的网站遇到了一些问题。我想将CSS添加到我的按钮中，使其类似于我在web上找到的按钮。 我不能向它添加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>

我同意这些条款；条件（必选）

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

（函数（$）{
$（'input[type=“checkbox”]”）。在（'click'，function（）上{
如果（$（this）.is（':checked'））{
$（this）.closest（'label'）.addClass（'checked'）；
}否则{
$（this）.closest（'label'）.removeClass（'checked'）；
}
});
})（jQuery）
.grunion-field-label.checkbox{
位置：相对位置；
左侧填充：24px；
}
.grunion-field-label.checkbox输入[type=“checkbox”]{
显示：无；
}
.grunion字段标签。复选框：在{
内容：“；
位置：绝对位置；
左：0；
宽度：20px；
高度：20px；
边界半径：10px；
背景色：#fff；
边框：1px实心#ddd；
}
.grunion字段标签.checkbox.checked:之后{
内容：“；
位置：绝对位置；
顶部：4px；
左：8px；
边框：2倍实心#fff；
左边界：无；
边界顶部：无；
宽度：4px；
高度：8px；
变换：旋转（45度）；
}
.grunion字段标签.checkbox.checked:之前{
背景色：#0c0；
边框颜色：#0c0；
}

我同意这些条款；条件（必选）
对于当前的DOM结构，您可以使用以下代码片段：


.grunion字段标签{
位置：相对位置；
显示：内联块；
左侧填充：10px；
线高：30px；
}
.grunion字段标签：：之前{
背景色：#fff；
边框：1px实心#ccc；
边界半径：50%；
光标：指针；
高度：28px；
左：0；
位置：绝对位置；
排名：0；
宽度：28px；
内容：“；
}
.grunion字段标签输入[type=“checkbox”]+span:：after{
边框：2倍实心#fff；
边界顶部：无；
边界权：无；
内容：“；
高度：6px；
左：7px；
不透明度：0；
位置：绝对位置；
顶部：8px；
变换：旋转（-45度）；
宽度：12px；
}
.grunion字段标签输入[type=“checkbox”]{
可见性：隐藏；
}
.grunion字段标签输入[type=“checkbox”]：选中+span:：之后{
边框颜色：#f00；
不透明度：1；
}

我同意这些条款；条件（必选）
您可以使用我不能更改HTML代码，因为它是由Wordpress自动生成的-为什么不能？Wordpress是如何生成的？你在用插件吗？如果是，哪个？您可以尝试编辑css文件并添加
label.checkbox.grunion字段标签{yourCss}
？（其他类的想法相同）无论如何，你不能使用它，因为你的输入在你的标签中——如果你想使用codepenThanks中的样式来获取信息，你需要输入在标签之前。然而，我得到这个太高了。怎么解决呢？尝试在
前
和
后
伪元素中调整
top
的值。效果非常好！谢谢，您知道如何编辑“我同意条款和条件”的字体大小吗