自定义勾选框（Custom Checkbox & Radio）是什么：效果预览与 AI 设计提示词

效果预览

接收产品更新邮件已阅读并同意服务协议订阅行业周报按月付费按年付费（省 20%）

适合用在哪

所有表单、筛选器、协议勾选、多选列表。

容易踩的坑

用 display:none 隐藏原生 input，复选框失去键盘焦点和读屏语义。
可点区域只有 16px 的方框，没把 label 包进来，移动端很难点中。
未选中态描边颜色对比度低于 3:1，在白底上几乎看不出这里有个框。

设计提示词 · Prompt

自定义勾选框（Custom Checkbox）：15-20px 见方、4-5px 圆角、1.5px 描边；选中态背景填品牌色、描边同步变色，白色对勾用 scale 0→1 弹出（150ms cubic-bezier(.34,1.56,.64,1) 有回弹）。单选框改为全圆角，选中时描边变粗（border-width 4-5px）形成"空心圆环"效果，不需要内部圆点元素。整组键盘可访问（保留原生 input 的 :focus-visible 光圈）。点击热区至少 44×44px（热区大于视觉尺寸）。

Custom Checkbox: 15-20px square, 4-5px border radius, 1.5px border; in the checked state the background fills with brand color and the border changes color in sync, and a white checkmark pops in via scale 0→1 (150ms cubic-bezier(.34,1.56,.64,1) with overshoot). Radio buttons use a full border radius; when selected the border thickens (border-width 4-5px) to form a "hollow ring" effect, without needing an inner dot element. The whole group is keyboard accessible (keep the native input's :focus-visible ring). The click target is at least 44×44px (hit area larger than the visual size).

常见搭配

同一页面里经常和「自定义勾选框」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

筛选标签Filter Chips 行选择Row Selection 无障碍焦点环Focus Ring / focus-visible 表单主题色accent-color

演示 HTML 结构

<div class="s d-checks">
  <span class="d-ck"><span class="d-ck__box is-on"></span>接收产品更新邮件</span>
  <span class="d-ck"><span class="d-ck__box is-on is-on--g"></span>已阅读并同意服务协议</span>
  <span class="d-ck"><span class="d-ck__box"></span>订阅行业周报</span>
  <span class="d-ck"><span class="d-ck__radio is-on"></span>按月付费</span>
  <span class="d-ck"><span class="d-ck__radio"></span>按年付费（省 20%）</span>
</div>