Html 为什么我的另一个复选框面板在这个奇怪的自定义复选框问题中丢失了？

这把小提琴很好

本质上应该是这样

但在我的自定义复选框中，正如您在fiddle中看到的，它显示如下

注意标签前的checkgroup中有两个输入

HTML

<div class=" text-left"><span class="font-weight-bold">Include</span> <span class="font-weight-bold">Exclude</span>
  <div>
    <div>
      <div class="checkGroup"><input type="checkbox" class="include" value="Chicken"> <input type="checkbox" class="exclude"> <label>
                Chicken
                </label></div>
    </div>
    <div>
      <div class="checkGroup"><input type="checkbox" class="include" value="Turkey"> <input type="checkbox" class="exclude"> <label>
                Turkey
                </label></div>
    </div>
    <div>
      <div class="checkGroup"><input type="checkbox" class="include" value="Beef"> <input type="checkbox" class="exclude"> <label>
                Beef
                </label></div>
    </div>
    <div>
      <div class="checkGroup"><input type="checkbox" class="include" value="Pork"> <input type="checkbox" class="exclude"> <label>
                Pork
                </label></div>
    </div>
    <div>
      <div class="checkGroup"><input type="checkbox" class="include" value="Fish"> <input type="checkbox" class="exclude"> <label>
                Fish
                </label></div>
    </div>
    <div>
      <div class="checkGroup"><input type="checkbox" class="include" value="No Meat - Vegetarian Only"> <input type="checkbox" class="exclude"> <label>
                No Meat - Vegetarian Only
                </label></div>
    </div>
    <div>
      <div class="checkGroup"><input type="checkbox" class="include" value="No Meat - Vegan Only"> <input type="checkbox" class="exclude"> <label>
                No Meat - Vegan Only
                </label></div>
    </div>
  </div>
</div>

---

从您的评论和聊天中，单击

不应触发任何复选框单击

因此，您的原始CSS基本上是无用的，因为：

对于2个复选框，您只有1个标签

你所有的CSS都在设计1个标签的样式，就像有2个标签一样

例如，这一行：

[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
    ...
}

不执行任何操作，因为没有足够的

标签

可用于其中一个

[type=“checkbox”]

，除了它们相互覆盖之外

此外，您的CSS代码包含许多自重写CSS，类似于：

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {...}

两个相反的州使用相同的样式。它可以简化为

[type="checkbox"] {...}

建议的解决方案

您可以将大多数样式从

标签

转移到

[type=“checkbox”]

和

[type=“checkbox”]：checked:：after

看看这个

---

不完全是您要求的，但我相信您可以自己调整。

从您的评论和聊天中，单击

不会触发任何复选框单击

因此，您的原始CSS基本上是无用的，因为：

对于2个复选框，您只有1个标签

你所有的CSS都在设计1个标签的样式，就像有2个标签一样

例如，这一行：

[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
    ...
}

不执行任何操作，因为没有足够的

标签

可用于其中一个

[type=“checkbox”]

，除了它们相互覆盖之外

此外，您的CSS代码包含许多自重写CSS，类似于：

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {...}

两个相反的州使用相同的样式。它可以简化为

[type="checkbox"] {...}

建议的解决方案

您可以将大多数样式从

标签

转移到

[type=“checkbox”]

和

[type=“checkbox”]：checked:：after

看看这个

不完全是你想要的，但我相信你可以自己调整。

原则如下：

.checkGroup{
显示：内联flex；
对齐项目：居中；
光标：指针；
}
.checkGroup[类型=复选框]{
可见性：隐藏；
位置：绝对位置；
}
cbox图像{
位置：相对位置；
高度：1米；
宽度：1米；
边缘：0.35em；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
边框：2倍实心#eee；
边界半径：5px；
}
.checkGroup输入：选中+cbox图像：之后，
.checkGroup input+cbox image+cbox image:在{/*选中状态之后*/
内容:'✔';
位置：绝对位置；
字号：1.4em；
线高：0.8；
颜色：#09ad7e；
字体系列：Helvetica、Arial、无衬线字体；
}
.checkGroup输入：选中+cbox图像+cbox图像：之后，
.checkGroup输入：未（：选中）+cbox映像：{/*未选中状态*/
内容：无；
}

土耳其

原则如下：

.checkGroup{
显示：内联flex；
对齐项目：居中；
光标：指针；
}
.checkGroup[类型=复选框]{
可见性：隐藏；
位置：绝对位置；
}
cbox图像{
位置：相对位置；
高度：1米；
宽度：1米；
边缘：0.35em；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
边框：2倍实心#eee；
边界半径：5px；
}
.checkGroup输入：选中+cbox图像：之后，
.checkGroup input+cbox image+cbox image:在{/*选中状态之后*/
内容:'✔';
位置：绝对位置；
字号：1.4em；
线高：0.8；
颜色：#09ad7e；
字体系列：Helvetica、Arial、无衬线字体；
}
.checkGroup输入：选中+cbox图像+cbox图像：之后，
.checkGroup输入：未（：选中）+cbox映像：{/*未选中状态*/
内容：无；
}

土耳其

为什么要投否决票？否决票不是我的，但是你只有一个

来支持两个

元素。是标签的

：before

组成了复选框，因此，如果您想要两个复选框，则每行需要两个复选框。参考：为什么要投否决票。其中任何一个：、和。@Obidian Age我在实际代码中尝试过，但复选框根本没有点击。但是，切换到本机复选框可以让它们正常工作。让我们来看看。为什么是下一票？下一票不是我的，但两个

元素只有一个

。是标签的

：before

组成了复选框，因此，如果您想要两个复选框，则每行需要两个复选框。参考：为什么要投否决票。其中任何一个：、和。@Obidian Age我在实际代码中尝试过，但复选框根本没有点击。不过，切换到本机复选框可以让它们正常工作。让我们来看看。@AliGajani据我所知，CSS无法相对于其父级大小动态调整

font size

。别担心，我已经解决了。我只是想增加字体大小。@AliGajani看起来你可以做

[type=“checked”]：而不是（：checked:）：{…}

是的，我问了问题一分钟后就这么做了。Works@AliGajani据我所知，CSS无法动态调整相对于其父级大小的

字体大小。别担心，我已经解决了。我只是想增加字体大小。@AliGajani看起来你可以做
[type=“checked”]：不（：checked:）：：在{…}
之后是的，我只是在问问题一分钟后做的。@Yong说，作为一名少年银行，使用CSS的这种机制让我大吃一惊。数据架构始终是代码中最重要的部分。这里只有两种状态：
0
和
1
（打开/关闭、选中/取消选中、包含/排除）。如果这两个属性是可以独立设置的不同属性，那么就需要两个控件=>两个输入。这种使用CSS的机制让我作为JuniorTanks感到震惊，@Yong说。数据体系结构总是很重要的