CSS点击关联label为何无法触发单选框input的:active状态？

自定义样式的单选按钮存在跨浏览器状态表现不一致问题：

• 鼠标悬停在单选按钮<input>或其关联<label>上时，绿色的hover state可正常生效
• 黄色的active state仅在鼠标直接点击单选按钮时正常触发，点击关联label时不会触发，此时单选按钮仅保持绿色hover状态
• 该问题在Chrome、Edge、Opera（均为Chromium内核）中存在，Firefox浏览器表现符合预期

复现代码如下：

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    background-color: white;
    border: .0625rem solid rgb(128, 128, 128);
    border-radius: 50%;
}

input[type="radio"]:checked {
    background-color: red;
}

input[type="radio"]:checked:hover {
    background-color: green;
}

input[type="radio"]:checked:active {
    background-color: yellow;
}

label {
    font-size: 2rem;
    user-select: none;
    color: black;
}

<input type="radio" name="myInput" id="first">
<label for="first">Label 1.</label>
<br>

<input type="radio" name="myInput" id="second">
<label for="second">Label 2.</label>

这是Chromium内核的默认行为逻辑：点击关联<label>触发表单控件状态变更时，浏览器只会将:hover状态同步到绑定的表单元素，不会同步传递:active状态——:active状态只会挂载在实际被点击的label元素上，不会自动关联到绑定的input，和Firefox的全状态同步逻辑存在差异。

核心思路是不要仅依赖input自身的:active伪类，额外增加label激活状态下对应单选按钮的样式匹配规则，两种可选实现方案：

• 方案1（兼容性最佳，支持全版本主流浏览器）：调整HTML结构，将单选按钮嵌套到label内部，表单控件会自动和父级label关联，无需保留for/id绑定，通过父子选择器匹配状态即可。
  调整后HTML：

  <label>
      <input type="radio" name="myInput">
      Label 1.
  </label>
  <br>
  <label>
      <input type="radio" name="myInput">
      Label 2.
  </label>
  

  调整CSS的active状态规则，合并两种点击场景：

  input[type="radio"]:checked:hover {
      background-color: green;
  }
  /* 同时匹配直接点击input、点击label两种激活场景 */
  input[type="radio"]:checked:active,
  label:active input[type="radio"]:checked {
      background-color: yellow;
  }
  

• 方案2（保留原有HTML结构，仅适配现代浏览器）：无需调整DOM结构，利用现代浏览器支持的:has()伪类，匹配label激活时对应的前置兄弟单选按钮，补充CSS规则即可：

  input[type="radio"]:checked:hover {
      background-color: green;
  }
  input[type="radio"]:checked:active,
  /* 匹配后置关联label被点击时，对应的已选中单选按钮 */
  input[type="radio"]:checked:has(+ label[for]:active) {
      background-color: yellow;
  }
  

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