如何使用CSS控制radio button单选按钮内部深色圆圈的大小

原生单选按钮属于浏览器内置UI组件，没有暴露直接修改内部选中圆点尺寸的CSS属性，业界通用的实现方式是重置原生控件外观后自定义样式，以下是两种常用实现方法：

方法1：径向渐变实现（代码最简单） #

通过appearance: none清除原生样式后，用radial-gradient背景绘制内部选中圆点，直接调整渐变参数即可修改圆点大小：

/* 单选按钮基础样式 */
input[type="radio"] {
  /* 清除原生默认外观 */
  -webkit-appearance: none;
  appearance: none;
  /* 自定义单选按钮外层尺寸 */
  width: 20px;
  height: 20px;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
}

/* 选中状态样式 */
input[type="radio"]:checked {
  border-color: #1677ff;
  /* 调整radial-gradient的百分比即可控制内部圆点大小：第一个值为圆点填充区域占比，第二个值为透明区域起始占比 */
  background: radial-gradient(circle, #1677ff 45%, transparent 47%);
}

如果你需要更大的内部圆点，比如占外层70%的大小，把渐变参数改为radial-gradient(circle, #1677ff 68%, transparent 70%)即可。

方法2：伪元素实现（扩展性更强） #

如果需要给内部圆点添加额外样式（比如边框、阴影、动画效果），可以用伪元素单独绘制圆点，直接修改伪元素的宽高就能调整尺寸：

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

input[type="radio"]:checked {
  border-color: #1677ff;
}

/* 内部选中圆点 */
input[type="radio"]:checked::after {
  content: "";
  /* 直接修改宽高即可调整圆点大小 */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1677ff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

低版本浏览器兼容提示：如果需要兼容不支持appearance属性的IE浏览器，可以将原生单选按钮设置为display: none，通过关联的label元素自定义全部样式，选择器修改为input[type="radio"]:checked + label即可实现相同效果。

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