Contact Form 7 Pure CSS Checkbox Styling

[Jacqui]

I want to style the checkbox in my CF7 form.

I have placed it within a label and used this code.

.wpcf7-checkbox label input {
position: absolute;
margin-left: 6px !important;
right: 0;
width: auto;
opacity: 0;
}
header-contact .wpcf7-checkbox label span.wpcf7-list-item-label:before {
content: ‘’ !important;
border: 2px solid #dbdbdb !Important;
border-radius: 5px !Important;
cursor: pointer !Important;
display: inline-block !important;
float: right !Important;
height: 49px !important;
position: relative !Important;
top: 0 !important;
margin-left: 20px !important;
margin-top: -15px !Important;
width: 48px !important;
}
header-contact .wpcf7-checkbox input:checked+span.wpcf7-list-item-label:before {
background-color: #000 !important;
background-image: url(http://test.unknowndesign.co.za/wp-content/uploads/2018/02/checkbox_tick.svg) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 80% !important;
}

But when I click in the checkbox, the checkbox tick doesn’t display, what am I doing wrong?

[Joao]

Hi There,

Please try adding the following code and adjusting according to your taste.

#header-contact .wpcf7-checkbox label input {
    opacity: 0;
    color: black !important;
    opacity: 1;
    margin: auto;
    height: 50px;
    width: 50px;
    margin-top: -15px;
}

Hope it helps