在 CSS 中，除了已选中和未选中外，如何为按下状态设置复选框或单选按钮的样式？

Question

我正在使用不可见的单选按钮和带有可见标签的复选框分别创建模式 UI（单一模式随时处于活动状态）和切换按钮。理想情况下，我想为以下每个状态使用不同的图像

未选中
按下
已检查

我使用了以下模板。 :checked 和 :not(:checked) 选择器正在工作。对于按钮元素， :active 似乎适用于鼠标 down/pressed 状态。对于复选框和单选按钮，它们似乎不起作用。如何为鼠标 down/pressed 状态设置样式？

    input#toggle_button:not(:checked) ~label{
      content: url(../assets/button_toggle_normal.png);
    }

    input#toggle_button:checked ~label{
      content: url(../assets/button_toggle_selected.png);
    }

    input#toggle_button:active ~label{
      content: url(../assets/button_toggle_pressed.png);
    }

Answer 1

您不能将 :active 与复选框和单选按钮结合使用。

根据 the W3 standard，:active 仅适用于按钮输入：

If the element is an input element whose type attribute is in the Submit Button, Image Button, Reset Button, or Button state

您可能需要想出一些巧妙的解决方法，例如：

$('[type="checkbox"]').bind('mousedown', function() {
    $(this).addClass('active');
}).bind('mouseup mouseout change', function() {
    $(this).removeClass('active');
});

注意：活动状态可能还应考虑空格键按下事件和触摸事件。

Answer 2

我不认为会有一个纯粹的 CSS 解决方案，我会去使用 Javascript / jQuery 来解决这个问题：

$("input#toggle_button ~label").on("mousedown", function(){
  $(this).addClass("pressed");
}).on("mouseup", function(){
  $(this).removeClass("pressed");
});

检查这个代码笔：http://codepen.io/kaoz70/pen/JKWXvx

在 CSS 中，除了已选中和未选中外，如何为按下状态设置复选框或单选按钮的样式？

In CSS how do I style checkbox or radio button for pressed state apart from checked and not checked?

css

checkbox

radio-button

togglebutton