移动端网页单选框选中状态不显示自定义颜色排查
单选框选中状态颜色未生效时，应优先检查浏览器是否支持 accent-color 属性。
检查浏览器对 accent-color 的支持情况
移动端网页单选框选中状态颜色未生效，首先需要确认当前使用的浏览器是否支持 accent-color 属性。根据资料，该属性目前处于 Limited availability 状态，并非所有主流浏览器都支持。如果浏览器不支持，设置的颜色将不会生效。在移动端，不同厂商的浏览器对 CSS 属性的实现存在差异，部分浏览器可能仅支持部分类型的控件。
可以通过在浏览器开发者工具中查看元素样式，或者直接在支持该属性的浏览器中测试来验证。资料指出，浏览器支持该属性时会将其应用于 input type='checkbox'、input type='radio'、input type='range' 和 progress 元素。若浏览器不支持，这些控件将使用默认的系统颜色，无法通过 CSS 修改。因此，排查的第一步是确认浏览器兼容性。
确认 CSS 语法与元素类型是否匹配
即使浏览器支持 accent-color 属性，也需要确认 CSS 语法是否正确以及是否应用到了正确的元素上。资料显示，该属性的语法包括关键字 auto 和颜色值，例如 accent-color: red; 或 accent-color: #5729e9;。如果使用了不支持的语法，或者将属性应用到了不支持该属性的元素上，颜色也不会生效。
例如，资料中的示例代码展示了如何为 input 元素设置自定义颜色。如果将 accent-color 应用到 div 或 span 等非控件元素上，将不会产生任何效果。此外，属性值必须符合 CSS 颜色值的规范，如 hex、rgb 或 hsl 格式。检查 CSS 代码，确保语法正确且选择器指向了正确的 input 元素，是排查问题的关键步骤。
验证属性是否被继承或覆盖
accent-color 属性具有继承特性，这意味着它可以从父元素继承颜色值。如果父元素设置了 accent-color，子元素可能会自动继承该颜色。然而，如果子元素或控件本身设置了明确的 accent-color 值，将覆盖继承的颜色。此外，某些浏览器可能会在特定状态下使用固定的颜色值，以减少指纹识别的风险。
在排查时，需要检查控件的样式定义是否明确覆盖了继承的颜色。如果父元素设置了颜色，但控件显示为默认颜色，可能是控件本身设置了明确的 accent-color 值，或者浏览器在特定状态下限制了颜色的显示。资料提到，每个用户代理都有其 accent 颜色，以确保可读性和对比度，该颜色并非用于所有用户界面控件或所有状态。因此，需要确认控件是否处于适用该颜色的状态。
使用 auto 值恢复系统默认颜色
如果自定义颜色设置后效果不符合预期，或者需要恢复到系统的默认颜色，可以使用 auto 关键字。资料指出，auto 代表用户代理选择的颜色，该颜色应匹配平台的 accent 颜色。通过设置 accent-color: auto;，可以将控件的颜色重置为系统的默认颜色，确保与操作系统的主题保持一致。
在移动端，不同操作系统的默认颜色可能不同。例如，iOS 和 Android 的默认 accent 颜色可能存在差异。使用 auto 值可以确保控件颜色与系统主题协调，提升用户体验。如果自定义颜色导致控件在特定状态下不可见或对比度不足，设置 auto 是一个有效的解决方案。检查代码，确保使用了正确的关键字，可以快速解决颜色显示异常的问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。