本文介绍在 angular 项目中通过 css `accent-color` 属性快速、原生地修改复选框（checkbox）选中时的高亮色，替代传统伪元素模拟方案，兼容现代浏览器且无需 javascript 干预。
在 Angular 应用中动态生成座位选择控件（如影院选座）时，常需直观反馈用户点击状态——例如将已选座位的复选框背景变为绿色。你当前使用 <input type="checkbox"> + <label> 的结构，并尝试通过 input:checked + label 选择器改变关联 label 的样式，但该方式仅适用于 label 紧跟在 input 后且由 HTML 原生渲染的场景。而你的 generateSeats() 方法通过 insertAdjacentHTML 动态插入 DOM，若未严格保证 <input> 和 <label> 的相邻顺序与结构一致性（例如存在换行、空格或中间插入其他节点），CSS 邻居选择器（+）可能失效。
更简洁、可靠且符合现代标准的解决方案是直接控制复选框自身的视觉表现：使用 CSS 新增的 accent-color 属性。它专为表单控件（如 checkbox、radio）设计，用于统一设置激活态（checked/selected）的强调色，无需隐藏原生控件或借助伪元素模拟。
✅ 推荐写法（添加至组件样式文件，如 seat-selection.component.css）：
.all-seats input[type="checkbox"] {
/* 可选：重置默认边框/尺寸以更好适配UI */
width: 18px;
height: 18px;
margin: 0 4px;
}
.all-seats input[type="checkbox"]:checked {
accent-color: rgb(28, 185, 120); /* ✅ 选中时的主色调 */
}
/* 可选：禁用聚焦轮廓，提升视觉整洁度 */
.all-seats input[type="checkbox"]:focus {
outline: none;
}⚠️ 注意事项：
- accent-color 已获 Chrome 93+、Firefox 92+、Safari 15.4+ 等主流浏览器支持（Can I use），若需兼容旧版 IE 或早期移动端，可回退至 appearance: none + 自定义伪元素方案；
- 该属性仅作用于原生 checkbox/radio 的内部高亮区域（即圆点或方块），不影响 label 文本或背景；
- 不要滥用 !important —— 除非存在强优先级冲突，否则建议通过更精确的选择器（如 .all-seats input[type="checkbox"]:checked）自然覆盖；
- Angular 中动态生成 DOM 时，确保 insertAdjacentHTML 插入的是语义正确的相邻结构（如你代码中 <input> <label> 是连续插入的），但即使结构微调，accent-color 仍能稳定生效，因其直接绑定到 input 元素本身。
总结：与其依赖易断裂的 DOM 关系选择器，不如拥抱标准化的 accent-color。它语义清晰、维护成本低、性能优异，是 Angular（及所有现代前端框架）中定制 checkbox 选中色的首选方案。
