无法让切换开关在 Asp.Net Web 表单中工作

Question

我需要添加一个切换开关，我可以读取和设置，告诉我是否用户想要激活或禁用。

我有这个CSS，我发现在多个不同的例子

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input { 
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

和使用这个HTML

<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>

但是当我实际测试它时，它像这样呈现HTML，这导致切换开关不起作用截图

用红色标记的行是从某处添加的，我只能看到它，如果我去检查铬元素。我不知道为什么会发生这种情况，如果我删除有问题的行，那么切换开关将按预期工作

我希望有人能解决这个困扰了我这么久的问题

Answer 1

在CSS中，下一个兄弟组合子(+)用于设置.sliderspan上的选中样式。如果HTML是由ASP控件生成的，就像在您的示例中使用<asp:CheckBox ... />代替<input type="checkbox">时一样，它将不匹配，因为在input和.slider之间有一个HTML元素(因此没有下一个兄弟关系)，您也指出了这一点。要在这种情况下仍然获得匹配，可以在选中样式的选择器中使用子-兄弟组合子(~)来代替next-sibling combinator。