如何考虑ASP用于将样式应用于输入标记的span标记？

Question

我有一个使用以下CSS的自定义复选框

.yesNoBox {
  display: none;
}

.yesNoBox + label {
  border-radius: 10px;
  display: inline-block;
  padding: 2px 10px;
  cursor: pointer;
}

.yesNoBox + label:after {
  padding-left: 8px;
  color: gray;
  content: "NO";
  vertical-align: middle;
}

.yesNoBox:checked + label:after {
  color: green;
  content: "YES";
  font-weight: bold;
}

.yesNoBox + label > span {
  height: 16px;
  border-radius: 8px;
  width: 16px;
  background-color: lightgray;
  display: inline-block;
  vertical-align: middle;
}

.yesNoBox:checked + label > span {
  background-color: green;
}

CSS是为以下html设计的

<input id="General_Vehicles" name="General_Vehicles" type="checkbox">
<label for="General_Vehicles"><span></span></label>

但是，由于我正在使用ASP Checkbox控件，ASP控件将<input>包装在<span> ，而是提供以下html：

<span class="yesNoBox"><input id="General_Vehicles" name="General_Vehicles" type="checkbox"></span>
<label for="General_Vehicles"><span></span></label>

我设置了以下两个小提琴，显示每个html块的行为：

• 它应该如何工作
• 它在ASP中的表现如何

如何使用额外的跨度在我的ASP页面上运行？ 我不想要JavaScript解决方案或代码隐藏解决方案。

Answer 1

如果你无法更新标记本身，那么我不完全确定这将是纯粹通过CSS的可能性。

CSS缺少任何类型的父母选择器 ，这需要定位:checked元素的父元素，以便可以通过+或~运算符来定位adjecent元素。 如果存在一个这样的运算符，您只需要：

/* If your yesNobox is the parent of a :checked element, then target the next label */
.yesNoBox:has(:checked) + label:after { ... }

您可能需要求助于基于Javascript的解决方案，或者能够明确地编辑标记以便可能实现这一点，正如您所提到的那样似乎是不可能的。