如何在 ASP.NET asp:checkbox 控件呈现的 HTML 控件中定位 :after psuedo 元素？ [重复]

Question

我已经看到了适用于简单输入标签对的代码：

HTML

<input type="checkbox" id="toggle" class="checkbox" />  
<label for="toggle" class="switch"></label>

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius:50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.checkbox:checked + .switch::after {
  left : 20px;
}
.checkbox:checked + .switch {
  background-color: #7983ff;
}
.checkbox {
  display : none;
}

上面的工作示例：

https://codepen.io/lawrencelove/pen/xxBWpBj

但不幸的是，当使用 ASP.NET

asp:checkbox

控件时，它以不同的方式呈现 HTML。

HTML

<span class="checkbox"><input id="toggle" type="checkbox" name="ctl00$ucSiteVersion$toggle" checked="checked">
</span>
<label for="toggle" class="switch"></label>

在这种情况下，因为

input

控件嵌套在

span

标签内，这似乎导致它不再与组合器选择器匹配。

上面带有

span

标签的损坏示例：

https://codepen.io/lawrencelove/pen/MWxVrxm

我尝试了相邻兄弟姐妹和后代的各种组合，但我无法让它与结束

span

标签一起很好地发挥作用。我还尝试引用

#toggle:checked

而不是

.checkbox:checked

，但这也不起作用。

如何从

.switch

标签内的

checkbox

控件定位

span

？

Answer 1

替换这个：

.checkbox:checked + .switch::after {
  left : 20px;
}
.checkbox:checked + .switch {
  background-color: #7983ff;
}

这样：

span:has(> input:checked) + .switch::after {
  left : 20px;
}
span:has(> input:checked) + .switch {
  background-color: #7983ff;
}