如何调整Checkbox（复选框）内部勾选标记（Tick）的大小？

原生<input type="checkbox">的内置勾选标记样式无法直接修改尺寸和粗细，要实现自定义效果，最稳妥的方式是隐藏原生控件，用CSS伪元素重构复选框和勾选标记，具体方案如下：

实现步骤 #

1. 保留原HTML结构，仅在checkboxWrapper内新增一个用于自定义样式的容器（若无需兼容旧浏览器，也可用:has选择器省略此容器）；
2. 隐藏原生复选框，但保留它的交互能力（点击、Tab聚焦）；
3. 用自定义容器模拟复选框的边框样式；
4. 利用:checked状态控制自定义勾选标记的显示，同时完全自定义标记的尺寸、粗细和颜色。

完整代码示例 #

HTML #

<div class="defaultRoot">
  <div class="defaultBody ">
    <div class="checkboxWrapper">
      <input id="kis-9l7v7o3vr" type="checkbox" class="kischeckbox">
      <!-- 新增自定义复选框容器 -->
      <span class="customCheckbox"></span>
    </div>
    <div class="labelWrapper">
      <label class="label" data-disabled="false" for="kis-9l7v7o3vr">I agree to sell my privacy</label>
    </div>
  </div>
</div>

CSS #

.checkboxWrapper {
  position: relative;
  /* 保持和原复选框一致的尺寸 */
  width: 24px;
  height: 24px;
}

/* 隐藏原生复选框，但保留交互能力 */
.kischeckbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  outline: none;
}

/* 自定义复选框边框，和原样式对齐 */
.customCheckbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid gray;
  border-radius: 0;
  background-color: #ffffff;
  transition: border-color 0ms ease, background-color 0ms ease;
}

/* 自定义勾选标记，默认隐藏 */
.kischeckbox:checked + .customCheckbox::after {
  content: '';
  position: absolute;
  /* 调整标记位置使其居中 */
  top: 2px;
  left: 7px;
  /* 标记的尺寸 */
  width: 6px;
  height: 12px;
  /* 标记的粗细和颜色 */
  border-right: 2px solid rgb(47, 55, 93);
  border-bottom: 2px solid rgb(47, 55, 93);
  /* 旋转成对勾形状 */
  transform: rotate(45deg);
}

参数调整说明 #

你可以根据需求修改以下参数：

• width/height：调整勾选标记的整体大小；
• border-right/border-bottom的宽度：修改标记的纤细程度（比如改成1px会更细）；
• top/left：调整标记在复选框内的位置；
• border-color：修改标记的颜色。

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