How to account for the span tag ASP uses to apply a style to input tag?

Question

I have a custom checkbox using the following 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;
}

The CSS is designed for the following html

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

However, since I'm using ASP Checkbox Controls, the ASP Control wraps the <input> in a <span> giving the following html instead:

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

I have the following two fiddles set up showing the behavior for each block of html:

• How it should work
• How it behaves in ASP

How can I get this working on my ASP page with that extra span? I don't want a JavaScript solution or a code behind solution.

Answer 1

If you aren't capable of updating the markup itself, then I'm not entirely sure how possible this is going to be purely through CSS.

CSS lacks any type of parental selector , which would be required to target the parent element of your :checked element so that the adjecent element could be targeted via the + or ~ operators. If one such operator did exist, you would just need something like :

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

You would sadly need to resort to a Javascript-based solution or have the ability to explicitly edit the markup in order to likely accomplish this, which as you mentioned seems out of the question.