我想使用纯css格式化我的CF7复选框。
我已将其放在标签中并使用此代码。
.wpcf7-checkbox label input {
position: absolute;
margin-left: 6px !important;
right: 0;
width: auto;
opacity: 0;
}
.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;
}
.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;
}
以下是复选框的HTML：
<span class="newsletter"><span class="wpcf7-form-control-wrap mailchimp"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first last"><label><span class="wpcf7-list-item-label">Sign up for our newsletter</span><input type="checkbox" name="mailchimp[]" value="Sign up for our newsletter" /></label></span></span></span></span>
但是当我点击复选框时，复选框勾选不会显示。我做错了什么？