Contact Form 7 now outputs the label element right after the checkbox input, its the .wpcf7-list-item-label class, helpfully it’s already got a :before and :after pseudo-element ready to roll as well. Tapping into all that with a bit of scss we can turn the checkbox input into a circular black and white radio button. Nice.
.chkboks {
input {
position: relative;
visibility: hidden;
margin: 0 5px 0 0;
font-size: 16px;
}
span.wpcf7-list-item {
width: 46%;
width: calc(50% - 3px);
margin: 0;
position: relative;
}
span.wpcf7-list-item-label {
cursor: pointer;
vertical-align: top;
}
span.wpcf7-list-item-label:before {
content:"";
display: block;
position: absolute;
border-radius: 50%;
width: 14px;
height: 14px;
left: 0;
top: 0;
background:#000000;
}
span.wpcf7-list-item-label:after {
position: absolute;
content:"";
background: #000000;
border-radius: 50%;
width: 6px;
height: 6px;
left: 4px;
top: 4px;
transition: all 0.4s ease-out;
}
input:checked + span.wpcf7-list-item-label:after {
background: #DBDBDB;
}
}