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 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.

I'm not entirely sure that this will be possibly solely through CSS as it lacks any type of parent selector, which you would need in order to select adjacent elements from a `yesNoBox` that contains a checked element. Do you have any ability at all to adjust your markup (i.e. use `` as opposed to a ``?) — Rion Williams, Apr 28 '16 at 20:14
Shoot, that's what I was afraid of. I can't modify the markup, unfortunately. — Chris Stillwell, Apr 28 '16 at 20:22

score 3 · Accepted Answer · edited May 23 '17 at 10:28

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.

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

1 Answers1