html - 如何考虑 ASP 用于将样式应用于输入标签的跨度标签？

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 复选框控件，因此 ASP 控件包装了 <input>在<span>改为提供以下 html:

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

我设置了以下两个 fiddle 来显示每个 html block 的行为:

• How it should work
• How it behaves in ASP

我怎样才能在我的 ASP 页面上使用那个额外的跨度让它工作？我不想要 JavaScript 解决方案或代码隐藏解决方案。

Answer 1

如果您无法更新标记本身，那么我不完全确定这有多大可能完全通过 CSS。

CSS lacks any type of parental selector ，这将需要以 :checked 元素的父元素为目标，以便可以通过 + 或 ~ 运算符来定位adjecent元素.如果确实存在这样的运算符，您只需要类似的东西:

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

遗憾的是，您可能需要求助于基于 Javascript 的解决方案或能够显式编辑标记才能完成此操作，正如您提到的那样，这似乎是不可能的。