Css 使用令人敬畏的字体设置表单复选框的样式（<；输入>；内部<；标签>；

为了获得如下所示的样式化思想，我尝试替换默认复选框并对其进行样式化

目前，问题是复选框没有勾选，我不明白为什么

链接到JSFIDLE:

HTML

<div class="col-md-6 checkboxes">
<label for="id_tags_0"><input type="checkbox" name="tags" value="4" id="id_tags_0">
 Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
Tag 2</label>
</div>

---

您正在尝试使用父选择器，这在css中是不可能的

你可以试试这个。 在复选框后添加

span

，并设置样式

。复选框标签{
/*显示：内联块*/
光标：指针；
位置：相对位置；
左侧填充：28px；
右边距：20px；
页边距底部：0；
线高：24px；
字体大小：16px；
}
/*隐藏默认复选框*/
.checkbox输入[type=checkbox]{display:none；}
/*默认情况下，在标签前面显示一个空框*/
.复选框标签范围：之前{
内容：“；
显示：内联块；
宽度：19px；
高度：19px；
右边距：10px；
位置：绝对位置；
左：0；
顶部：3px；
背景色：#fff；
边框：2px实心#d0；
边界半径：4px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
过渡：均为0.25秒；
字体系列：“FontAwesome”；
字体大小：12px；
颜色：#fff；
文本对齐：居中；
线高：15px；
}
/*选中复选框输入后，在框中添加一个勾号*/
.复选框标签>输入[类型=复选框]：选中+span:之前{
/*内容：https://fontawesome.com/icons/check?style=solid */
内容：“\f00c”；
背景色：#66676b；
边框：2个实心#66676b；
}
.复选框标签>输入[类型=复选框]：选中{
/*内容：https://fontawesome.com/icons/check?style=solid */
内容：“\f00c”；
背景色：#66676b；
边框：2个实心#66676b；
}

标签1
标签2
标签3
标签4
标签5

不幸的是，我无法编辑HTML表单并将

span

类放入其中，因为

for loop

，这比简单的编辑更复杂。我可以将

span

类放在

之后或

之前，而不是放在内部。

.checkboxes label {
    /*display: inline-block;*/
    cursor: pointer;
    position: relative;
}

/*Hide default checkbox*/
.checkboxes  input[type=checkbox] { display: none; }

/*Show an empty box before the our label by default*/
.checkboxes label:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 3px;
    background-color: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all 0.25s;
    font-family: "FontAwesome";
    color: #fff;
    text-align: center;
}


/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
    content: "\f00c";
    background-color: #66676b;
    border: 2px solid #66676b;
}

.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
    content: "\f00c";
    background-color: #66676b;
    border: 2px solid #66676b;
}