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

Question

我制作了一些自定义复选框和单选按钮。我使用 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>

然后，当我的 Angular View 加载时，我使用 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();

});

我不明白为什么样式不适用？我的 Angular 代码可以工作，并且它正确地将checked =“checked”属性放置在适合我的表达式的元素上

Answer 1

font-family: 'FontAwesome';

问题出在这里。虽然您可以设置复选框的样式，但存在一些限制。就像，如果您使用一些自定义字体系列，它将无法工作。删除字体系列并使用以下 unicode 内容，它应该可以工作。

content: "\2714";