自定义多选框

藏起原生方框，换一个圆角方形 + 勾的自有样式

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

代码

<label class="chk"><input type="checkbox" checked><span class="box">✓</span>选项文字</label>
<style>
.chk { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.chk input { position: absolute; opacity: 0; }
.chk .box { width: 25px; height: 25px; border-radius: 7px; border: 2px solid #C7C3BA;
  display: grid; place-items: center; color: transparent; transition: all .18s; }
.chk input:checked + .box { background: #141414; border-color: #141414; color: #fff; }
.chk input:focus-visible + .box { outline: 2px solid #141414; outline-offset: 2px; }
</style>

<label class="flex cursor-pointer items-center gap-[11px]"><input type="checkbox" class="peer sr-only" checked>
<span class="grid h-[25px] w-[25px] place-items-center rounded-[7px] border-2 border-[#C7C3BA] text-transparent transition-all peer-checked:border-neutral-900 peer-checked:bg-neutral-900 peer-checked:text-white">✓</span>选项文字</label>
<!-- 注意：peer 要求 input 与 span 是兄弟且 input 在前 -->

export function Checkbox({ label, defaultChecked }) {
  const [on, setOn] = React.useState(!!defaultChecked);
  return (<label style={{ display: "flex", alignItems: "center", gap: 11, cursor: "pointer" }}>
    <input type="checkbox" checked={on} onChange={(e) => setOn(e.target.checked)} style={{ position: "absolute", opacity: 0 }} />
    <span style={{ width: 25, height: 25, borderRadius: 7, display: "grid", placeItems: "center",
      border: "2px solid " + (on ? "#141414" : "#C7C3BA"), background: on ? "#141414" : "transparent",
      color: on ? "#fff" : "transparent", transition: "all .18s" }}>✓</span>{label}</label>);
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

套路是「真 input 隐身 + 假方框替身」：label 包住 sr-only 的 input 和一个 span 方框，用 :checked + 相邻选择器给方框上色打勾。关键是别把 input 用 display:none 删掉——键盘焦点和表单语义都靠它，焦点样式画在替身 span 上。

How it works (English)

The pattern is 'real input goes invisible, fake box performs': a label wraps an sr-only input and a span box; :checked with the sibling selector fills the box and shows the check. Never display:none the input — keyboard focus and form semantics depend on it; draw the focus style on the stand-in span.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

自定义多选框 · 提示词待复验 · →