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

【问题标题】：In CSS how do I style checkbox or radio button for pressed state apart from checked and not checked?在 CSS 中，除了选中和未选中之外，我如何为按下状态设置复选框或单选按钮的样式？
【发布时间】：2016-06-28 06:08:18
【问题描述】：

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

未选中
按下
已检查

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

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

【问题讨论】：

如果你想要一个中间状态，你可能想要使用:focus 并有四种变体——正常、焦点正常、选定、焦点选定。 :active 不适用于复选框，但 :focus 适用于所有 input。该效果不适用于“按下时”，但它会是一个很好的可用性增益（可以与 :hover 配对，供鼠标使用）并提供类似的反馈。

标签： css checkbox radio-button togglebutton

【解决方案1】：

我认为没有纯 CSS 解决方案，我会为此使用 Javascript / jQuery：

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

检查此 Codepen：http://codepen.io/kaoz70/pen/JKWXvx

【讨论】：

【解决方案2】：

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

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

如果元素是input 元素，其type 属性处于提交按钮、图像按钮、重置按钮或按钮状态

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

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

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

【讨论】：

tbh 最好制作一个分离的选择-按下和取消选择-按下图像，然后将其附加到:focus。避免了对 JS/JQ 混杂的需要，同时提供了类似的（可以说是更好的可用性）效果。哦，感谢链接标准。不过，您的释义略有错误，它也适用于 a 标签以及其他一些标签（在标准中列出）