当使用CSS输入时，为什么活动状态可能在输入时成功触发，但在标签上却没有?悬停状态在这两种情况下都能正常工作

Question

问题：在下面的简化示例中，当鼠标位于输入单选按钮和标签上时，绿色hover state会按预期工作。但是，虽然黄色active state在鼠标单击单选按钮时按预期工作，但在鼠标单击标签时不会激发。当鼠标单击标签时，单选按钮将保持绿色。Chrome、Edge和Opera都是如此。有趣的是，唯一一个能像我预期的那样使用单选按钮的浏览器是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>

Answer 1

其他浏览器的解决方案。

当标签放置在收音机之前时，可以使用相邻的同级选择器来实现预期效果。缺点是需要额外的样式来实现无线电和输入的预期位置。

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;
}

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

#second {
float: left;
}

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