Question

我使用隐形单选按钮和带有可见标签的复选框分别创建模式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);
    }

Answer 1

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

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

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

您可能需要提出一些聪明的解决方法，例如：

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

注意：活动状态也应该考虑空格键的keydown事件和触摸事件。

Answer 2

我不认为会有一个纯粹的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

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

2 个答案: