点击RadioButton时如何修改容器背景色？

问题分析 #

你之前尝试用父容器选择器失败，是因为CSS没有原生向上选择的父选择器，不过现在可以通过现代CSS特性或JavaScript来实现需求。

方案一：纯CSS实现（现代浏览器支持） #

利用CSS :has() 伪类检测容器内的radio是否被选中，直接修改容器样式。

修改后的CSS代码 #

.team {
    border: var(--basic-border-color);
    width: 19em;
    height: 7em;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.2s ease; /* 添加过渡动画更丝滑 */
}

/* 新增：当容器内的radio被选中时，修改容器背景色 */
.team:has(input[type="radio"]:checked) {
    background-color: var(--selected-bg); /* 替换成你需要的颜色或变量 */
}

.team__first-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .6rem;
    margin-bottom: 2em;
}

input[type="radio"] {
    appearance: none;
    border-radius: 50%;
    border: var(--basic-border-color);
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    position: relative;
}

/* 把:focus改成:checked，对应选中状态而非仅聚焦 */
input[type="radio"]:checked {
    border: none;
    background: var(--container-bg);
}

input[type="radio"]::before {
    content: "";
    width: 0.2em;
    height: 0.2em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
}

/* 同样把:focus改成:checked */
input[type="radio"]:checked::after {
    content: url(../imgs/vuesax/bulk/Vector.svg);
    position: absolute;
    top: .12em;
    left: .3em;
}

注意事项 #

• :has() 伪类目前支持Chrome 105+、Safari 15.4+，如果需要兼容旧浏览器，建议用方案二。
• 确保所有同组radio的name属性一致，保证单选功能正常。

方案二：JavaScript实现（兼容所有浏览器） #

通过给radio绑定事件，手动控制容器的样式变化。

步骤1：给radio添加类名（方便选择） #

修改HTML，给radio加上类名：

<div className='team'>
  <div className="team__first-row">
    <svg>{image}</svg>
    <input type="radio" name="Monitor" id="Monitor" class="team-radio" />
  </div>
  <p className="team__name">{teamName}</p>
</div>

步骤2：添加JavaScript逻辑 #

// 选中所有team内的radio
const teamRadios = document.querySelectorAll('.team-radio');

teamRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    // 找到当前radio所属的.team容器
    const currentTeam = this.closest('.team');
    
    // 重置所有.team容器的背景样式（单选组需要取消其他选中状态）
    document.querySelectorAll('.team').forEach(team => {
      team.classList.remove('selected-team');
    });
    
    // 如果当前radio被选中，给容器添加选中类
    if (this.checked) {
      currentTeam.classList.add('selected-team');
    }
  });
});

步骤3：添加选中状态的CSS类 #

.selected-team {
    background-color: var(--selected-bg); /* 替换成你需要的颜色 */
    border-color: var(--selected-border-color); /* 可选：同时修改边框色 */
}

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