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页面上运行？我不想要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的解决方案，或者能够明确地编辑标记以便有可能实现这一点，正如你所提到的那样似乎是不可能的。

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

1 个答案: