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>

然后，当我的角度视图加载时，我用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();

});

我不明白造型为何不适用？我的角度代码有效，它正确地将检查=＆＃34;检查＆＃34;对于我的表达式

的元素属性

Answer 1

font-family: 'FontAwesome';

是问题所在。虽然您可以设置复选框样式，但仍存在一些限制。就像，如果你使用一些自定义字体系列，它不会工作。删除字体系列并使用以下unicode内容，它应该可以工作。

content: "\2714";

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

1 个答案: