-
Anonymous
Пользовательский флажок не работает в контактной форме 7
Сообщение
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;
}
Было бы очень полезно, если бы вы указали на мою ошибку. Я что-то упустил?
Демо
Подробнее здесь:
https://stackoverflow.com/questions/439 ... act-form-7
1719650172
Anonymous
Я хочу изменить цвет своего флажка с черного на красный, когда он установлен, но не могу получить результат. Пожалуйста, проверьте код:
HTML
[code] .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;
}[/code]
[code]
1000
2000
3000
4000
5000
[/code]
Было бы очень полезно, если бы вы указали на мою ошибку. Я что-то упустил?
Демо
Подробнее здесь: [url]https://stackoverflow.com/questions/43929283/custom-checkbox-not-working-in-contact-form-7[/url]