如何仅使用CSS为选中状态为true的单选按钮添加勾选图标图片

完全可以仅通过CSS实现该效果，核心依赖CSS的:checked伪类选择器，不需要引入任何JavaScript代码。

实现核心思路 #

• 先为单选按钮关联对应<label>标签，通过input的id和label的for属性绑定，保证点击label可触发单选按钮的选中状态切换
• 隐藏原生的单选按钮控件，可选择display: none，如果需要兼顾无障碍访问可改为绝对定位移出可视区域，避免影响屏幕阅读器识别
• 通过:checked伪类匹配处于选中状态的单选按钮，再配合相邻兄弟选择器+选中对应的label，为其添加带勾选图标的背景、或通过::before/::after伪元素插入勾选图标即可

可直接运行的示例代码 #

HTML结构 #

<div class="radio-group">
  <div class="radio-item">
    <input type="radio" name="demo" id="radio1">
    <label for="radio1">选项1</label>
  </div>
  <div class="radio-item">
    <input type="radio" name="demo" id="radio2">
    <label for="radio2">选项2</label>
  </div>
  <div class="radio-item">
    <input type="radio" name="demo" id="radio3">
    <label for="radio3">选项3</label>
  </div>
</div>

CSS样式 #

/* 隐藏原生单选框 */
.radio-item input[type="radio"] {
  display: none;
}
/* 未选中状态的label样式 */
.radio-item label {
  position: relative;
  padding-left: 28px;
  line-height: 24px;
  cursor: pointer;
}
/* 未选中时的单选框默认样式 */
.radio-item label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
}
/* 选中状态下添加勾选图标 */
.radio-item input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* 这里替换为你的勾选图片地址即可 */
  background: url(你的勾选图标本地路径) center / contain no-repeat;
}

如果之前尝试没有生效，大概率是两个原因：

1. 没有正确关联input和label，点击时没有实际触发单选按钮的选中状态
2. CSS选择器优先级不够，或没有正确选中选中态对应的label元素

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