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

我做了一些定制的复选框和单选按钮。我使用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代码工作正常，它正确地将checked=“checked”属性放在表达式中为true的元素上

font-family: 'FontAwesome';

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

content: "\2714";

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

content: "\2714";

---

你能把它放进去吗？勾选和不勾选的样式是一样的？此外，复选框的样式也有限制，即使在不同的浏览器中也不一样。你说的“不起作用”是什么意思？正如我所能测试的那样，它工作正常。我猜您缺少的是，例如：

.checkbox{position:relative；}

对不起，添加了一些css。我做了编辑。我使用fornt awesome图标，当选中复选框时，您可以在标签中看到。问题是我的图标不会根据这些选择器显示。你确定这不仅仅是因为它出现在屏幕外吗？是否正在为

.checkbox

div设置相关的位置属性？默认情况下，它是静态的，您应该将它设置为

相对
关于
：在
伪元素获得绝对位置后。参见示例：仅供参考，不要使用
[checked=“checked”]
，checked是一个布尔属性，浏览器解析器可以将其设置为空/缺少值。您可以将其放入吗？选中和未选中的样式相同？此外，复选框的样式也有限制，即使在不同的浏览器中也不一样。你说的“不起作用”是什么意思？正如我所能测试的那样，它工作正常。我猜您缺少的是，例如：
.checkbox{position:relative；}
对不起，添加了一些css。我做了编辑。我使用fornt awesome图标，当选中复选框时，您可以在标签中看到。问题是我的图标不会根据这些选择器显示。你确定这不仅仅是因为它出现在屏幕外吗？是否正在为
.checkbox
div设置相关的位置属性？默认情况下，它是静态的，您应该将它设置为
相对
关于
：在
伪元素获得绝对位置后。参见示例：仅供参考，不要使用
[checked=“checked”]
，checked是一个布尔属性，浏览器解析器可以将其设置为空/缺少值