WordPress Fluent Forms单选按钮自定义CSS改色不生效问题排查

问题背景 #

在WordPress站点使用Fluent Forms插件创建联系表单，目标表单CSS标识为fluent_form_3。在表单「设置与集成」页面添加的自定义CSS其余规则均正常生效，仅单选按钮无法修改为白色，在深色背景下无法正常显示。
此前尝试针对以下CSS选择器编写样式，均未实现效果：

• .fluentform .ff-el-form-check label.ff-el-form-check-label
• ff-el-form-check-input
• ff-el-form-check-radio
• ff-el-form-check
• ff-el-form-check-
• ff_item_selected

当前已正常生效的CSS代码如下：

form.fluent_form_3 .ff-el-form-control {     
    color: white; /* 修改输入框字体颜色 */
}

/* 修改表单标签样式 */
.ff-el-input--label{
    font-size:22px; /* 修改标签字号 */
    color: white; /* 修改标签颜色 */
}

/* 所有输入字段、下拉选项文字样式 */
form.fluent_form_3 label { color: white; }

样式失效原因 #

1. 编写的部分选择器漏写了类名必需的.前缀，无法命中对应页面元素
2. 浏览器原生单选按钮控件不受普通color属性控制，必须先清除原生默认样式才能自定义外观，且原有规则优先级不足，无法覆盖插件自带的默认样式。

可用实现代码 #

将以下代码追加到现有自定义CSS末尾即可，规则优先级足够覆盖插件默认样式，同时适配选中/未选中状态的显示效果：

/* 清除单选按钮原生样式，设置未选中状态为白边透明底 */
form.fluent_form_3 .ff-el-form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: transparent;
    vertical-align: middle;
    margin-right: 8px;
    cursor: pointer;
    position: relative;
}

/* 选中状态白底样式 */
form.fluent_form_3 .ff-el-form-check-input[type="radio"]:checked {
    background-color: #ffffff;
}

/* 选中状态内部深色圆点，保证深色背景下的显示对比度 */
form.fluent_form_3 .ff-el-form-check-input[type="radio"]:checked::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #000000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 聚焦状态取消默认外边框，替换为浅色柔光效果 */
form.fluent_form_3 .ff-el-form-check-input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}

若保存CSS后刷新页面未看到效果，清空WordPress站点缓存、浏览器本地缓存后再重试即可。

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