Html 设置未选中复选框的样式（使用引导）

我正在尝试根据选中或未选中的条件，使用引导样式以简单形式设置复选框的样式。然而，由于某些原因，它不起作用。带有样式的跨度图元不接受选中和未选中状态的样式。请注意，此表单在页面上重复多次，输入元素保持相同的id和名称（但是，如果它只出现一次，它仍然不起作用）

输入[type='button']。图标复选框{
显示：无
}
输入[type='checkbox']。图标复选框{
显示：无；
}
输入[type='checkbox']。图标复选框+标签。未选中{
显示：内联块；
}
输入[type='checkbox']。图标复选框+标签。选中{
显示：无；
}
输入[type='checkbox']：选中。图标-checkbox{
显示：无
}
输入[type='checkbox']：选中。图标复选框+标签。未选中{
显示：无
}
输入[type='checkbox']：选中。图标复选框+标签。选中{
显示：内联块
}

保持匿名
:
(...)

HTML

希望这能奏效。

HTML

---

希望这能奏效。

这里有两个问题。首先，在CSS中不能倒退。因此，当您使用

+

操作符时，必须按照编写元素的顺序来编写元素

因为您的代码是这样编写的：

input[type='checkbox'].icon-checkbox + label

…您需要将输入字段作为同级字段物理地置于标签上方。或者，您可以交换CSS

第二个问题是CSS中的输入错误

此行缺少空格：

input[type='checkbox']:checked.icon-checkbox+ label.unchecked{display:none}

…而且应该是：

input[type='checkbox']:checked.icon-checkbox + label .unchecked{display:none}

如果

标签

和

未选中

之间没有空格，代码将查找类为unchecked的标签，而不是类为unchecked的子标签

最后的代码是这样工作的

HTML:

---

jsidle示例：

这里有两个问题。首先，在CSS中不能倒退。因此，当您使用

+

操作符时，必须按照编写元素的顺序来编写元素

因为您的代码是这样编写的：

input[type='checkbox'].icon-checkbox + label

…您需要将输入字段作为同级字段物理地置于标签上方。或者，您可以交换CSS

第二个问题是CSS中的输入错误

此行缺少空格：

input[type='checkbox']:checked.icon-checkbox+ label.unchecked{display:none}

…而且应该是：

input[type='checkbox']:checked.icon-checkbox + label .unchecked{display:none}

如果

标签

和

未选中

之间没有空格，代码将查找类为unchecked的标签，而不是类为unchecked的子标签

最后的代码是这样工作的

HTML:

jsidle示例：

尝试以下方法：

输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签#未选中{
显示：内联块；
}
输入[类型=复选框]+标签#选中{
显示：无；
}
输入[类型=复选框]：选中+标签#未选中{
显示：无；
}
输入[类型=复选框]：选中+标签#选中{
显示：内联块；
}

保持匿名：

试试这个：

输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签#未选中{
显示：内联块；
}
输入[类型=复选框]+标签#选中{
显示：无；
}
输入[类型=复选框]：选中+标签#未选中{
显示：无；
}
输入[类型=复选框]：选中+标签#选中{
显示：内联块；
}

保持匿名：

此示例帮助您

/*自定义检查*/
.海关支票{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*隐藏浏览器的默认复选框*/
.customcheck输入{
位置：绝对位置；
不透明度：0；
光标：指针；
}
/*创建自定义复选框*/
.对号{
位置：绝对位置；
排名：0；
左：0；
高度：25px；
宽度：25px；
背景色：#eee；
边界半径：5px；
}
/*在鼠标悬停时，添加灰色背景色*/
.customcheck:悬停输入~.checkmark{
背景色：#ccc；
}
/*选中复选框后，添加蓝色背景*/
.customcheck输入：选中~.checkmark{
背景色：#02cf32；
边界半径：5px；
}
/*创建复选标记/指示器（未选中时隐藏）*/
.勾选：之后{
内容：“；
位置：绝对位置；
显示：无；
}
/*选中时显示选中标记*/
.customcheck输入：选中~。选中标记：之后{
显示：块；
}
/*设置复选标记/指示器的样式*/
.customcheck.checkmark:after{
左：9px；
顶部：5px；
宽度：5px；
高度：10px；
边框：纯白；
边框宽度：0 3px 3px 0；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}

自定义复选框

一个
两个
三
四

此示例帮助您

/*自定义检查*/
.海关支票{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*隐藏浏览器的默认复选框*/
.customcheck输入{
位置：绝对位置；
不透明度：0；
光标：指针；
}
/*创建自定义复选框*/
.对号{
位置：绝对位置；
排名：0；
左：0；
高度：25px；
宽度：25px；
背景色：#eee；
边界半径：5px；
}
/*在鼠标悬停时，添加灰色背景色*/
.customcheck:悬停输入~.checkmark{
input[type='button'].icon-checkbox {
  display: none
}

input[type='checkbox'].icon-checkbox {
  display: none;
}

input[type='checkbox'].icon-checkbox+label .unchecked {
  display: inline-block;
}

input[type='checkbox'].icon-checkbox+label .checked {
  display: none;
}

input[type='checkbox']:checked.icon-checkbox {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+ label .unchecked {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+ label .checked {
  display: inline-block
}