如何在ASP.NET asp:checkbox渲染的HTML中定位.switch的:after伪元素

当使用ASP.NET的asp:checkbox控件时，渲染后的HTML会将<input>包裹在带.checkbox类的<span>中，导致原有的相邻兄弟选择器无法匹配对应的.switch标签。以下是两种可行的解决方案：

方案1：使用CSS :has()伪类（推荐，现代浏览器支持） #

利用:has()伪类选中包含已勾选状态<input>的<span>，再通过相邻兄弟选择器定位后续的.switch及其伪元素：

修改后的完整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;
}

/* 选中包含已勾选input的span，匹配相邻的switch */
.checkbox:has(input:checked) + .switch {
  background-color: #7983ff;
}
.checkbox:has(input:checked) + .switch::after {
  left: 20px;
}

/* 隐藏span内的原生checkbox */
.checkbox input {
  display: none;
}

方案2：JavaScript辅助（兼容旧浏览器） #

如果需要兼容不支持:has()的浏览器，可通过监听checkbox的状态变化，给.switch添加/移除类来控制样式：

JavaScript代码： #

const toggleCheckbox = document.getElementById('toggle');
const switchElement = document.querySelector('.switch');

toggleCheckbox.addEventListener('change', function() {
  switchElement.classList.toggle('checked', this.checked);
});

对应CSS修改： #

/* 替换原有的checked状态选择器 */
.switch.checked {
  background-color: #7983ff;
}
.switch.checked::after {
  left: 20px;
}

/* 其他原有样式保留，隐藏input的样式改为： */
.checkbox input {
  display: none;
}

内容的提问来源于stack exchange，提问作者Lawrence Love