如何通过CSS为选中状态的radio单选按钮添加内边距效果

原有问题点 #

当前代码选中态直接给radio元素设置实心深色背景，会填满整个边框内部区域，无法留出空白间距；同时存在HTML结构嵌套错误、JS冗余操作选中状态的问题。

调整步骤 #

• 修正HTML结构：移除label内部嵌套input的错误写法，input与关联label并列放置，通过for属性和input的id绑定即可。同name属性的radio原生支持单选互斥，不需要手动写JS移除其他选项的checked属性，原有shout函数可以直接删除。
• 调整CSS实现逻辑：隐藏浏览器原生radio默认样式，选中态保持radio外框透明背景，通过::after伪元素绘制内部的深色选中圆点，通过控制圆点尺寸、居中定位，自然实现圆点和外框之间的空白内边距。

完整调整后代码 #

CSS代码 #

.cool input[type=radio] {
  /* 清除浏览器默认radio样式 */
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  height: 13px;
  width: 13px;
  border: 0.8px solid #121a21;
  border-radius: 100%;
  cursor: pointer;
  background: transparent;
  margin: 0;
  vertical-align: middle;
}

.cool input[type=radio]:checked {
  border: 0.8px solid #121a21;
  border-radius: 100%;
  cursor: pointer;
  /* 选中态背景保持透明，不填充整个区域 */
  background: transparent;
}

/* 伪元素绘制内部选中圆点 */
.cool input[type=radio]:checked::after {
  content: '';
  position: absolute;
  /* 圆点居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 圆点尺寸小于外框尺寸，四周自然留出空白，可按需调整宽高修改边距大小 */
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #121a21;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cool">
  <input role="radio" type="radio" id="d_sample" class="no-dd" name="rp_select">
  <label for="d_sample">选项1</label>
  <input role="radio" type="radio" id="d_admple" class="no-dd" name="rp_select">
  <label for="d_admple">选项2</label>
</form>

JS说明 #

原有手动切换checked属性的shout函数可以完全移除，原生radio同组（同name属性）默认自带单选互斥逻辑，不需要额外JS操作选中状态。如果需要在选中时触发自定义逻辑，直接给radio绑定change事件即可。

自定义调整说明 #

如果需要修改内边距大小，只需要调整.cool input[type=radio]:checked::after选择器下的width和height值：数值越小，内部圆点越小，和外框之间的空白间距越大；数值越接近外框的13px尺寸，空白间距越小。

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