Html 带有标签内输入的复选框的自定义样式

我正在尝试为复选框创建自定义样式。在我将

输入

放入

标签

之前，它一直正常工作

有人知道如何让CSS工作吗

input[type=checkbox]{/*以隐藏复选框本身*/
显示：无；
}
输入[类型=复选框]+标签：在{
颜色：绿色；
显示：内联块；
}
输入[类型=复选框]+标签：在{/*未选中图标之前*/
内容：“；
}
输入[type=checkbox]+标签：在复选框和标签之间的{/*空格之前*/
字母间距：10px；
}
输入[类型=复选框]：选中+标签：在{/*选中图标之前*/
内容：“✔";
}
输入[类型=复选框]：选中+标签：在{/*之前为复选标记留出空间*/
字母间距：5px；
}

你好

CSS引用

输入+标签

+

是相邻的同级选择器，这意味着它的目标是直接位于

输入

之后的

标签

输入[类型=复选框]{
显示：无；
}
/*隐藏复选框本身*/
输入[类型=复选框]+标签：在{
颜色：绿色；
显示：内联块；
}
输入[类型=复选框]+标签：在{
内容：“；
}
/*未选中图标*/
输入[类型=复选框]+标签：在{
字母间距：10px；
}
/*复选框和标签之间的间距*/
输入[类型=复选框]：选中+标签：之前{
内容：“✔";
}
/*选中图标*/
输入[类型=复选框]：选中+标签：之前{
字母间距：5px；
}
/*为复选标记留出空间*/

您好

，因为标签中有一个

，就在

输入旁边，您可以使用它来应用
伪
-元素：


输入[类型=复选框]{
显示：无；
}
输入[type=checkbox]+p:before{
显示：块；
内容：“；
宽度：18px；
高度：18px；
颜色：绿色；
字母间距：10px；
边缘底部：18px；
垂直对齐：顶部；
}
输入[类型=复选框]：选中+p:之前{
内容：“✔";
}
输入[类型=复选框]：选中+p:之前{
字母间距：5px；
}

你好

对不起，我需要。这是因为标签手风琴嵌套inside@BenjaminOats据我所知，没有javascript是不行的。CSS无法遍历备份链，因此嵌套的
输入
不会影响其父级的CSS.NP。如果您需要帮助使用JS，请随意更改您的问题，我会这样做，这非常简单。