如何为选中状态的Contact Form 7复选框设置样式

你之前的选择器失效核心原因是层级关系错误或目标元素不对——Contact Form 7的复选框选中状态的视觉样式，是通过span.wpcf7-list-item-label的伪元素实现的，原生input本身被隐藏，修改它的样式不会显示效果。

正确的CSS选择器方案 #

直接针对CF7复选框选中状态的伪元素修改样式：

/* 修改选中状态的背景色与边框色 */
.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span.wpcf7-list-item-label::before {
    background-color: #你的主题颜色值; /* 替换为你的主题匹配色 */
    border-color: #你的主题颜色值; /* 同步边框色保持视觉统一 */
}

/* 可选：调整选中时的对勾颜色 */
.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span.wpcf7-list-item-label::after {
    color: #fff; /* 示例：白色对勾，与背景形成对比 */
}

你的原有选择器失效原因分析 #

• .wpcf7-list-item > label:after > input[type=checkbox]:checked + span {}：label:after是伪元素，无法作为父元素嵌套input，语法逻辑错误。
• .wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:after {}：CF7的复选框视觉样式是加在span的::before伪元素上，而非span:after，目标伪元素错误。
• span.wpcf7-list-item.first > input[type=checkbox]:checked {}：原生input被CF7的CSS隐藏（opacity: 0或绝对定位移出视口），修改input本身样式不会显示。
• input[type="checkbox"]:checked {}：input被隐藏，且CF7的内置CSS优先级高于全局样式，你的代码被覆盖。

如果上述代码仍不生效，可临时用!important强制覆盖（非必要不推荐）：

.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span.wpcf7-list-item-label::before {
    background-color: #你的主题颜色值 !important;
    border-color: #你的主题颜色值 !important;
}

内容的提问来源于stack exchange，提问作者speshock