为什么我的复选框样式不起作用？

我做了一些自定义复选框和单选按钮。我称呼他们CSS如下：为什么我的复选框样式不起作用？

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"][checked="checked"] + label:after, 
input[type="radio"][checked="checked"] + label:after, 
input[type="radio"]:checked + label:after { 
    position: absolute; 
    display: block; 
    float: left; 
    height: 10px; 
    width: 10px; 
    top: 4px; 
    left: -19px; 
    z-index: 2; 
    background: #b7b7b7; 
    content: ""; 
} 

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"][checked="checked"] + label:after { 
    background: none; 
    top: 1px; 
    left: -20px; 
    font-family: 'FontAwesome'; 
    font-size: 12px; 
    color: #b7b7b7; 
    content: "\f00c"; 
}

这些元素的HTML看起来像这样

<div class="checkbox" ng-repeat="group in groups.initData.groups" 
    ng-checked="groups.modalData.access_groups[$index+1]"> 
    <input type="checkbox" 
      class="group-checkbox"> 
    <label><% group.group %> </label> 
</div>

然后我初始化它们像这样使用jQuery的时候我斜视负载：

$('.checkbox').click(function() { 
    if ($(this).children('input').prop("disabled")) 
     return; 

    if ($(this).children('input').prop("checked")) 
     $(this).children('input').prop("checked", false); 
    else 
     $(this).children('input').prop("checked", true); 

    $(this).children('input').change(); 
}); 


/* Radio handler */ 

$('.radio').click(function() { 
    if ($(this).children('input').prop("disabled")) 
     return; 

    var name = $(this).children('input').attr("name"); 

    $(this).children('input[name="' + name + '"]').prop("checked", false); 

    $(this).children('input').prop("checked", true); 

    $(this).children('input').change(); 

});

我不明白为什么造型不适用？我的角度代码工作，并把正确的检查=“选中”属性上是真实的元素为我表达

来源

2015-10-16 Jonathan Szekely

你能把它放到[plunker]（http://plnkr.co/edit/）吗？ – 2015-10-16 09:26:19

选中和未选中的样式是相同的？复选框的样式也有限制，甚至在浏览器中工作的不一样。 –

你是什么意思的“不工作”？正如我可以测试它，它按预期工作。我猜你缺少的是例如：'.checkbox {position：relative; }' –

font-family: 'FontAwesome';

是这里的问题。虽然您可以设置复选框的样式，但有一些限制。就像，如果你正在使用一些自定义的字体家族，它不会工作。删除字体家族，并使用下面的unicode内容，它应该工作。

content: "\2714";

来源

2015-12-11 11:28:16 sapy

为什么我的复选框样式不起作用？

回答

相关问题