如何考慮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的解決方案，或者能夠明確地編輯標記以便可能實現這一點，正如您所提到的那樣似乎是不可能的。