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

Why is my checkbox styling not working?

本文关键字：不起作用 样式 复选框 我的 为什么      更新时间：2023-09-26

我做了一些自定义的复选框和单选按钮。我用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();
});

我不明白为什么样式不适用？我的角度代码有效，它正确地将 checked="checked" 属性放在对我的表达式正确的元素上

font-family: 'FontAwesome';

是这里的问题.虽然您可以设置复选框的样式，但存在一些限制。比如，如果你使用一些自定义字体家族，那就行不通了。删除字体系列并使用以下 unicode 内容，它应该可以工作。

content: "'2714";
相关文章：