自定义Radio Input的:checked样式实现问题求助

问题根源 #

你的代码里有两个关键问题导致选中样式不生效：

1. HTML中标签拼写错误：<lavel>应为<label>，这会导致点击区域无法正确关联到radio输入控件
2. 缺少radio选中时容器.radio__item的样式切换逻辑

修复步骤 #

1. 修正<label>标签的拼写错误，确保点击label任意区域都能触发radio的选中状态
2. 使用CSS的:has()选择器，实现当radio选中时同步修改容器的边框和背景样式
3. 可选：添加过渡动画让样式切换更平滑

修复后的完整代码 #

CSS

span {
  font-size: 2rem;
}

.radio__item {
  display: flex;
  max-width: 360px;
  width: 100%;
  padding: 10px;
  align-items: center;
  background: #F3F6F9;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* radio选中时修改容器样式 */
.radio__item:has(.radio__input:checked) {
  border: 1px solid #EF5B0C;
  background: white;
}

.radio__input {
  display: none;
}

.radio__input:checked + .fake:after {
  opacity: 1;
}

.fake {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #EF5B0C;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translate(0, -50%);
}

.fake:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: #EF5B0C;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.text {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  margin-left: 30px;
  color: #003865;
}

.img {
  width: 60px;
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.img svg {
  max-width: 100%;
  width: 100%;
  height: auto;
}

HTML

<span>修复后的效果</span>
<label class="radio__item">
  <input type="radio" class="radio__input" name="radio">
  <div class="fake"></div>
  <div class="img">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6667 16.6667H28.3333V23.3334H11.6667V16.6667Z" fill="#003865"/>
<path d="M20 3.33337C10.81 3.33337 3.33334 10.81 3.33334 20C3.33334 29.19 10.81 36.6667 20 36.6667C29.19 36.6667 36.6667 29.19 36.6667 20C36.6667 10.81 29.19 3.33337 20 3.33337ZM20 33.3334C12.6483 33.3334 6.66668 27.3517 6.66668 20C6.66668 12.6484 12.6483 6.66671 20 6.66671C27.3517 6.66671 33.3333 12.6484 33.3333 20C33.3333 27.3517 27.3517 33.3334 20 33.3334Z" fill="#003865"/>
  </svg>
  </div>
  <div class="text">Choose me</div>
</label>

<br><br><br>

<span>预期的选中状态参考</span>
<label class="radio__item" style="border: 1px solid #EF5B0C; background: white;">
  <input type="radio" class="radio__input" name="radio" checked>
  <div class="fake">
    <div style="position: absolute; content: ''; width: 20px; height: 20px; background: #EF5B0C; border-radius: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
  </div>
  <div class="img">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6667 16.6667H28.3333V23.3334H11.6667V16.6667Z" fill="#003865"/>
<path d="M20 3.33337C10.81 3.33337 3.33334 10.81 3.33334 20C3.33334 29.19 10.81 36.6667 20 36.6667C29.19 36.6667 36.6667 29.19 36.6667 20C36.6667 10.81 29.19 3.33337 20 3.33337ZM20 33.3334C12.6483 33.3334 6.66668 27.3517 6.66668 20C6.66668 12.6484 12.6483 6.66671 20 6.66671C27.3517 6.66671 33.3333 12.6484 33.3333 20C33.3333 27.3517 27.3517 33.3334 20 33.3334Z" fill="#003865"/>
  </svg>
  </div>
  <div class="text">Choose me</div>
</label>

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