在Chrome中:在快捷键(空格键)上未释放单选按钮的活动状态

时间:2019-03-04 12:52:13

标签: css google-chrome css-selectors

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>

0 个答案:

没有答案