如何使用ANTD修改Checkbox复选框的形状

原生复选框是浏览器/操作系统层面渲染的原生表单控件，直接给input[type=checkbox]加background、border这类CSS属性大多不会生效，你看到的默认蓝色方块就是浏览器内置的默认样式，要自定义形状/颜色，通用实现方案如下：

方案1：无依赖纯CSS实现（兼容性最好，推荐生产环境用） #

核心逻辑是不直接修改原生复选框的样式，而是把原生控件视觉上隐藏（但保留交互、可访问性、表单提交能力），额外写一个元素作为自定义的复选框指示器，形状、颜色、动效完全自己控制。

代码示例 #

<label class="agree-term">
  <!-- 原生复选框不要加display:none，否则会丢失键盘/读屏软件支持 -->
  <input type="checkbox" required class="native-check">
  <!-- 自定义指示器，形状可自由修改 -->
  <span class="check-mark"></span>
  <span>我已阅读并同意《服务条款》</span>
</label>

.agree-term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

/* 视觉上隐藏原生复选框，保留交互能力 */
.native-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义复选框外观 */
.check-mark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #d9d9d9;
  background: #fff;
  /* 改圆角控制形状：4px是小圆角方块，50%是圆形，0是直角方块 */
  border-radius: 4px;
  transition: 0.2s all ease;
}

/* 选中状态样式 */
.native-check:checked + .check-mark {
  background: #1677ff; /* 替换成你需要的主题色 */
  border-color: #1677ff;
}

/* 选中状态的对勾，用伪元素绘制不需要图片 */
.native-check:checked + .check-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 保留键盘聚焦的轮廓提示，兼顾可访问性 */
.native-check:focus-visible + .check-mark {
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
}

如果需要其他异形样式，比如胶囊、自定义图标，直接修改.check-mark的CSS即可：要圆形就把border-radius设为50%，要特殊形状可以用clip-path裁剪，或者替换成背景图。

方案2：UI组件库场景适配 #

如果你是用Element、Ant Design、MUI这类现成组件库，不要直接覆写原生input的样式，优先用组件库暴露的自定义API：

• 可以通过组件提供的类名覆写指示器样式，逻辑和上面纯CSS方案一致
• 部分组件库支持直接传自定义图标、尺寸、圆角参数，直接改配置项即可

注意事项 #

不要用display: none或者visibility: hidden隐藏原生复选框，会导致键盘Tab键无法聚焦、屏幕阅读器无法识别控件，破坏无障碍访问能力，上面用的绝对定位+透明度设为0的方案是目前行业通用的最优处理。
不推荐直接用appearance: none重置原生控件样式的方案，不同浏览器下的表现差异较大，老旧浏览器兼容性差。

内容的提问来源于stack exchange，提问作者New AF