爲什麼我的複選框樣式不起作用？

我做了一些自定義複選框和單選按鈕。我稱呼他們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

爲什麼我的複選框樣式不起作用？

回答

相關問題