如何让自定义圆形复选框的内部填充背景也显示为圆形

当前实现的复选框外框已设置为正圆形，但内部填充为方形，对应效果：

• 未选中状态：
• 选中状态：

问题原因 #

1. 你目前用linear-gradient生成内部填充，这类渐变默认绘制为矩形，不会自动跟随外框的border-radius变成圆形
2. 没有设置box-sizing属性，默认的content-box盒模型会让padding、border撑大元素实际尺寸，很容易出现填充和外框不同心的问题
3. 原有padding:10px会压缩背景绘制区域，不利于精准控制内部填充的大小和位置

可直接复用的修复代码 #

不需要改HTML结构，直接替换原有CSS即可：

.checkbox {
  text-align: center;
  appearance: none;
  /* 固定盒模型，宽高计算包含边框和内边距，避免尺寸错乱 */
  box-sizing: border-box;
  height: 31px;
  width: 31px;
  padding: 0;
  margin-right: 12px;
  border: 3px solid #D6D6D6;
  border-radius: 50%;
  cursor: pointer;
  /* 用径向渐变直接生成正圆形填充，替换原线性渐变 */
  background: radial-gradient(circle, #F2F2F2 0%, #F2F2F2 100%);
  background-repeat: no-repeat;
  background-position: center;
  /* 保持你原本设计的内部填充尺寸15px*15px */
  background-size: 15px 15px;
}

.checkbox:checked {
  /* 选中状态切换为黑色圆形填充 */
  background: radial-gradient(circle, #000 0%, #000 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

效果说明 #

修改后内外轮廓均为正圆形：未选中状态是灰色描边+居中浅灰色小圆，选中状态是灰色描边+居中黑色小圆，填充尺寸和你原有设计完全一致，不会出现方形边角。
如果需要调整内部填充的大小，直接修改background-size的数值即可，数值越大内部圆形越大。

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