Пользовательский флажок не работает в контактной форме 7 ⇐ CSS

[Anonymous]

Я хочу изменить цвет своего флажка с черного на красный, когда он установлен, но не могу получить результат. Пожалуйста, проверьте код:
HTML

Код: Выделить всё

 .wpcf7-checkbox, .radio {
display: block;
margin: 10px 0 0;
}
.wpcf7-checkbox .wpcf7-list-item, .radio .wpcf7-list-item {
display: block;
}
.wpcf7-checkbox .wpcf7-list-item input[type=checkbox], .wpcf7-checkbox .wpcf7-list-item input[type=radio], .radio .wpcf7-list-item input[type=checkbox], .radio .wpcf7-list-item input[type=radio] {
display: none;
}
.wpcf7-checkbox .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, .wpcf7-checkbox .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before, .radio .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, .radio .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before {
background: #ffffff;
border: 1px solid red;
border-radius: 3px;
content: "";
height: 15px;
left: -22px;
position: absolute;
width: 15px;
}
.wpcf7-checkbox .wpcf7-list-item-label, .radio .wpcf7-list-item-label {
display: inline-block;
font-family: "Arial", sans-serif;
font-size: 14px;
font-weight: normal;
left: 15px;
line-height: 14px;
margin: 0 0 15px;
position: relative;
}
.wpcf7-checkbox .wpcf7-list-item-label::before, .radio .wpcf7-list-item-label::before {
background: #ffffff;
border: 1px solid #000000;
border-radius: 3px;
content: "";
height: 15px;
left: -22px;
position: absolute;
width: 15px;
}
.wpcf7-checkbox .wpcf7-list-item-label:hover, .radio .wpcf7-list-item-label:hover {
cursor: pointer;
}

Код: Выделить всё

 



1000



2000



3000



4000



5000

Было бы очень полезно, если бы вы указали на мою ошибку. Я что-то упустил?
Демо

Подробнее здесь: https://stackoverflow.com/questions/439 ... act-form-7