MODERN CSS
表单主题色accent-color
一行 accent-color 就让原生的复选框、单选框、滑块、进度条跟随品牌色，不用再自绘控件。
效果预览
原生复选框自动跟随主题色
单选框同理
滑块填充色
适合用在哪
想保持原生控件的可访问性、又不想它默认是蓝色时。轻量表单、设置页。
容易踩的坑
- 选了很浅的品牌色作为 accent-color，复选框勾号与底色对比度不足 3:1。
- 不设 color-scheme，暗色模式下原生控件仍是亮底，十分突兀。
- 不同浏览器对 accent-color 的渲染差异较大，未实测就上线导致风格不一致。
设计提示词 · Prompt
表单主题色（accent-color）：在 :root 或表单容器上写 accent-color: #4f46e5。原生 checkbox、radio、range、progress 会自动使用该色，同时保留系统的形状、尺寸、焦点环与键盘行为 —— 这比自绘控件省下的不只是样式代码，更是无障碍正确性。配套还有 color-scheme: light dark 让浏览器自动切换表单控件的明暗表现。注意：accent-color 无法改变控件尺寸与圆角，需要那些定制时仍得自绘（但成本要自己想清楚）。
accent-color: write accent-color: #4f46e5 on :root or the form container. Native checkbox, radio, range, and progress elements automatically use that color while keeping the system's shape, size, focus ring, and keyboard behavior — what this saves over custom-drawn controls isn't just styling code but accessibility correctness. It pairs with color-scheme: light dark, which lets the browser switch form controls between light and dark appearance automatically. Note: accent-color can't change control size or radius; for that kind of customization you still have to draw your own (but weigh the cost carefully).
常见搭配
同一页面里经常和「表单主题色」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="mc-accent">
<div class="mc-accent__r"><span class="mc-accent__cb"></span>原生复选框自动跟随主题色</div>
<div class="mc-accent__r"><span class="mc-accent__rd"></span>单选框同理</div>
<div class="mc-accent__r"><span class="mc-accent__rg"></span>滑块填充色</div>
</div>
</div>