如this jsbin中所示,我可以使用伪选择器:active
为单选按钮标签设置样式。但是,当我用空格键激活单选按钮时(如单击鼠标一样),此后不会释放活动状态。
有人可以向我解释吗?看来Firefox和Edge的处理方式不同。
body {
font-family: sans-serif;
}
input:active + label {
background-color: red;
}
<p>When a radio button in this group is :active the label background is red.</p>
<p>Works as expected when clicking (the radio button gets "deactivated" again when the mouse button is released).</p>
<p>But if I activate a radio button with the keyboard, key [Space], it <i>isn't</i> deactivated on key up. I can then move to another radio button with the arrow keys (= that button is checked).</p>
<p>Again, I can hit [Space] and now I have <i>two</i> radio buttons in active state.</p>
<p>If I use the arrow keys to navigate to one of these active radio buttons, <i>then</i> it gets deactivated.</p>
<input type="radio" id="huey" name="drone" value="huey" checked>
<label for="huey">Huey</label>
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
<p><br>Another group with only one button – same issue:</p>
<input type="radio" id="jonna" name="jonne" value="jonna">
<label for="jonna">Jonna</label>