WordPress网站自定义单选按钮样式问题：选中替换默认按钮代码失效

原代码存在以下几个问题导致自定义单选按钮样式失效：

• 仅隐藏选中状态的原生单选框，未选中的原生按钮仍会显示，无法彻底替换默认外观
• HTML结构中不存在.custom-radio-button类元素，CSS选择器无法匹配到目标对象
• 自定义样式的布局逻辑错误，未结合Contact Form 7（WPCF7）的默认DOM结构设计

修正方案（无需修改WPCF7生成的HTML结构） #

通过CSS伪元素结合WPCF7的默认DOM结构实现自定义单选按钮，同时彻底隐藏原生控件：

/* 彻底隐藏所有原生单选按钮，不占据页面空间 */
.wpcf7-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 给label设置相对定位，作为自定义单选框的容器 */
.wpcf7-list-item label {
    position: relative;
    padding-left: 24px; /* 给自定义单选框预留空间 */
    cursor: pointer;
}

/* 未选中状态的自定义单选框样式 */
.wpcf7-radio input[type="radio"] + .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ccc; /* 未选中时的边框色 */
    background-color: #fff;
}

/* 选中状态的自定义单选框样式 */
.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label::before {
    background-color: #9b51e0; /* 选中时的填充色 */
    border-color: #9b51e0; /* 选中时的边框色 */
    /* 可选：添加内部小点效果 */
    box-shadow: inset 0 0 0 3px #fff;
}

方案说明 #

1. 全局隐藏所有WPCF7单选框的原生控件，确保不同设备下都不会显示默认样式
2. 利用label的相对定位和伪元素创建自定义单选框，跟随原生控件的选中状态自动切换样式
3. 保留WPCF7默认的HTML结构，避免插件更新后结构变动导致样式失效

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