Radio Button不遵循CSS规则：检查器样式正确但实际渲染为默认蓝色

• 首先排除JS干扰：JS操作DOM样式一定会同步反映在浏览器控制台的计算样式面板中，当前计算样式已经显示为目标紫色，无需排查JS相关逻辑。
• 核心问题原因：现代浏览器的原生单选框、复选框默认调用系统原生UI渲染，你直接给input[type="radio"]元素设置的background-color、border-color实际作用于input元素本身的背景，而可视的选中圆点/勾选标记是浏览器额外渲染的内置组件，不受input基础样式影响，只有先禁用原生外观后自定义样式才会生效。
• 修复代码：
  你需要在原有样式基础上新增appearance: none属性，同时补充基础的尺寸、圆角定义，完整代码如下：

selector input[type="radio"]:checked, 
selector input[type="checkbox"]:checked, 
selector input[type="checkbox"]:hover:checked, 
selector input[type="checkbox"]:focus:checked, 
selector input[type=range]::-webkit-slider-thumb,
selector input[type=reset] {
    /* 关键：禁用原生外观 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 补充单选框基础尺寸，可根据需求调整 */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* 原有自定义样式 */
    border-color: #9710A6 !important;
    background-color: #9710A6 !important;
    box-shadow: none;
}
/* 可选：实现选中状态的白色中心圆点 */
selector input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    margin: 4px;
}

注意：原代码中逗号分隔的选择器没有统一加父级前缀，会导致input[type=reset]等样式全局生效，建议给每个逗号分隔的选择器都加上对应父级限制作用域，避免污染其他组件样式。

• 验证步骤：修改代码后强制刷新浏览器缓存，即可看到单选框选中状态变为紫色。

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