移动端浏览器对表单控件（如按钮）的默认样式和渲染机制与桌面端不同，导致通过 css 类名控制的颜色样式在移动设备上失效；需结合媒体查询和重置外观属性，并确保样式优先级正确。
移动端浏览器对表单控件（如按钮）的默认样式和渲染机制与桌面端不同，导致通过 css 类名控制的颜色样式在移动设备上失效；需结合媒体查询和重置外观属性，并确保样式优先级正确。
在移动端（尤其是 iOS Safari 和部分 Android 浏览器）中，原生
要彻底解决此问题，请按以下三步操作：
✅ 1. 强制重置外观并启用自定义样式
在 .sr-btn 基础样式中添加标准化重置规则，消除平台默认干扰：
.sr-btn {
-webkit-appearance: none; // 关键：禁用 iOS/Android 原生按钮外观
-moz-appearance: none; // 兼容 Firefox Android
appearance: none;
background: transparent;
border: none;
outline: none;
font: inherit; // 继承父级字体设置，避免系统字体干扰
color: inherit; // 确保颜色可被父级继承控制
}
✅ 2. 使用媒体查询精准适配移动端颜色
不要仅依赖 .is-active 类的全局样式，而应结合响应式断点 + 显式声明颜色。推荐使用 min-width（更符合现代响应式逻辑）并提升选择器特异性：
.select-wrapper {
&.is-active {
.sr-btn {
color: red; // 桌面端默认色
@media (max-width: 768px) {
color: red !important; // 移动端强制生效（必要时加 !important）
}
}
}
}
⚠️ 注意：!important 在此处是合理手段——因移动端 UA 样式表权重常高于普通 CSS 规则，适度使用可确保样式落地。
✅ 3. 额外加固：为 .is-selected 按钮单独设色（推荐）
由于你实际高亮的是下拉列表中的 .sr-list-button.is-selected，而非顶部触发按钮 .sr-btn，请确认样式目标是否准确。若意图是让下拉项中的选中项变红，应直接作用于该元素：
.sr-list-button.is-selected {
color: red;
@media (max-width: 768px) {
color: red;
}
}
同时确保其父容器无 color 或 text-shadow 等继承干扰，必要时添加 !important 并检查 DevTools 中的“Computed”面板验证最终生效样式。
? 调试建议
- 在 iOS Safari 中启用「开发者 → 远程调试」，实时查看移动端真实计算样式；
- 避免依赖 :active 或 :focus 状态模拟选中态，改用稳定类名（如 is-selected）；
- 若仍无效，尝试添加 transform: translateZ(0) 触发硬件加速，绕过某些 WebKit 渲染 bug。
遵循以上方案，即可实现跨平台一致的选中项颜色表现。
