本文介绍如何通过 css `accent-color` 属性为动态生成的复选框（如座位选择场景）设置选中时的背景颜色，解决传统 `:checked + label` 方式失效或样式不生效的问题。
在 Angular 应用中动态生成座位选择控件时，常通过 TypeScript 拼接 HTML 字符串插入 与对应
- 该写法仅能控制 label 样式，无法改变复选框原生控件的视觉表现；
- 若 DOM 插入顺序或结构稍有偏差（例如 与
✅ 推荐方案：使用现代 CSS 属性 accent-color
该属性专为表单控件（包括 checkbox、radio）设计，可直接修改其“强调色”——即勾选/激活状态下的填充色（背景色），无需依赖 label 或伪元素模拟：
.all-seats input[type="checkbox"]:checked {
accent-color: rgb(28, 185, 120); /* 翡翠绿，符合需求 */
outline: none; /* 可选：移除焦点轮廓提升视觉一致性 */
}⚠️ 注意事项：
- accent-color 已被 Chrome 93+、Edge 93+、Firefox 110+ 和 Safari 15.4+ 原生支持（caniuse.com/accent-color），旧版浏览器需降级处理（如配合 appearance: none + 自定义伪元素）；
- 不要加 !important（除非全局样式冲突严重），优先通过选择器特异性控制；
- 确保 HTML 中 元素未被额外包裹（如 ），否则可能破坏 :checked 状态绑定；
- Angular 中若使用 ViewEncapsulation.ShadowDom，需将样式放入组件 SCSS 文件并确保作用域正确。
? 补充建议（增强体验）：
为提升可访问性与交互反馈，可叠加状态过渡效果：.all-seats input[type="checkbox"] { transition: accent-color 0.2s ease; } .all-seats input[type="checkbox"]:checked { accent-color: #1cb978; }这样，用户点击时颜色变化更平滑自然，符合现代 Web 应用的设计规范。
