纯CSS实现单选框状态切换及自定义样式问题求助

问题根源 #

1. 单选框未设置相同的name属性，导致不属于同一组，无法实现互斥选中。
2. CSS伪类写法错误：:not(checked)应为:not(:checked)，缺少内层冒号。
3. 直接给<input type="radio">添加伪元素兼容性较差，推荐通过关联的<label>实现自定义样式。

修正后的完整代码 #

HTML代码

<input type="radio" class="b" name="test-group" id="check1">
<label for="check1">test</label>
<br>
<input type="radio" class="b" name="test-group" id="check2">
<label for="check2">test2</label>
<p>现在点击两个单选框，只会有一个保持选中状态</p>

CSS代码

/* 隐藏原生单选框 */
input.b[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 未选中状态的label样式 */
input.b[type=radio] + label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: blue;
  vertical-align: middle;
  transition: all 0.2s ease;
}

/* 选中状态的label样式 */
input.b[type=radio]:checked + label::before {
  border-color: red;
  background: red;
}

/* 选中状态的内部圆点 */
input.b[type=radio]:checked + label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  left: -11px;
  top: 1px;
  vertical-align: middle;
}

/* 未选中时的hover效果 */
input.b[type=radio]:not(:checked) + label:hover::before {
  border-color: #666;
  background: darkblue;
}

/* 选中时的hover效果 */
input.b[type=radio]:checked + label:hover::before {
  border-color: darkred;
  background: darkred;
}

代码说明 #

• 同一组单选框添加相同的name属性，确保互斥选中逻辑生效。
• 隐藏原生单选框，通过<label>伪元素渲染自定义样式，提升兼容性与可控性。
• 加入transition过渡效果，让状态切换更平滑自然。
• 分别针对未选中、选中状态配置hover样式，优化交互体验。

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