联系表格7复选框自定义样式

Question

我尝试自定义联系表单7中的复选框。

复选框的短代码是

<p>[checkbox checkbox id:roundcircle class:roundcircle use_label_element "Subscribe"]</p>

以html代码输出

<p>
<span class="wpcf7-form-control-wrap checkbox">
<span class="wpcf7-form-control wpcf7-checkbox roundcircle" id="roundcircle">
<span class="wpcf7-list-item first last">
<label>
<input type="checkbox" name="checkbox[]" value="Subscribe" />&nbsp;
<span class="wpcf7-list-item-label">Subscribe</span>
</label></span></span></span></p>

我一直试图通过各种成功来设置复选框的样式，但是无法使其工作并显示我希望它显示的方式。

这是我的css代码

.subscribeform input[type=checkbox] {
visibility: hidden;
}
.wpcf7-list-item > label > input[type=checkbox] + span  {
width: 28px;
 height: 28px;
display:inline-block;
 position: relative;
border-radius: 50px;
border: 1px solid #000000;
vertical-align:middle;
cursor: pointer;
box-sizing: border-box;
}
.wpcf7-list-item > label:after > input[type=checkbox] + span  {
content: '';
width: 16px;
height: 16px;
position: absolute;
background-color: #000000;
top: 2px;
left: 2px;
border-radius: 50px;
opacity: 0;
}
.wpcf7-list-item > label:after > input[type=checkbox]:checked + span {
opacity: 1;
}

我试图让它看起来如下图所示。

您可以查看codepen in action。