I am adding custom CSS to a tool that generates the HTML content for me. Unfortunately, it looks as though the tool generates radio buttons (<input type="radio") outside of a <form> element. This causes issues because as mentioned in an answer to another StackOverflow question if you do not have the <form> element you cannot apply the following code:
input[type="radio"]:checked+label {
background: yellow;
}
Here is an example of the code:
input[type="radio"]:checked+label {
background: yellow;
}<div class="apt-survey-multi-choice-radio-answers">
<label class="apt-survey-multi-choice-radio">
<input type="radio" value="d45ec94d-88cb-43bc-b4c9" placeholder="" class="" name="apt-trigger-radio-8c027e80-2df7-494a-a3a5" tabindex="31767">
<div class="apt-survey-multi-choice-radio-label">
<div class="multi-survey-answer">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":14281427},"12":0}" data-sheets-value="{"1":2,"2":"Marketing - Individual Contributor"}" style="font-size:10pt;font-family:Arial;font-style:normal;">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":13228792},"12":0}" data-sheets-value="{"1":2,"2":"Individual"}" style="font-size:10pt;font-family:Arial;font-style:normal;">Individual</span>
</span>
</div>
</div>
</label>
<label class="apt-survey-multi-choice-radio">
<input type="radio" value="ae74981b-6395-4718-89ca" placeholder="" class="" name="apt-trigger-radio-8c027e80-2df7-494a-a3a5" tabindex="31768">
<div class="apt-survey-multi-choice-radio-label">
<div class="multi-survey-answer">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":14281427},"12":0}" data-sheets-value="{"1":2,"2":"Product Marketing - Individual Contributor"}" style="font-size:10pt;font-family:Arial;font-style:normal;">Manager</span>
</div>
</div>
</label>
<label class="apt-survey-multi-choice-radio">
<input type="radio" value="c6a9fdfd-aed4-4bb9-9300" placeholder="" class="" name="apt-trigger-radio-8c027e80-2df7-494a-a3a5" tabindex="31769">
<div class="apt-survey-multi-choice-radio-label">
<div class="multi-survey-answer">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":14281427},"12":0}" data-sheets-value="{"1":2,"2":"Finance - Individual Contributor"}" style="font-size:10pt;font-family:Arial;font-style:normal;">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":13228792},"12":0}" data-sheets-value="{"1":2,"2":"Director"}" style="font-size:10pt;font-family:Arial;font-style:normal;">Director</span>
</span>
</div>
</div>
</label>
<label class="apt-survey-multi-choice-radio">
<input type="radio" value="285ddfff-4be4-4c23-9f26" placeholder="" class="" name="apt-trigger-radio-8c027e80-2df7-494a-a3a5" tabindex="31770">
<div class="apt-survey-multi-choice-radio-label">
<div class="multi-survey-answer">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":14281427},"12":0}" data-sheets-value="{"1":2,"2":"CSM - Manager"}" style="font-size:10pt;font-family:Arial;font-style:normal;">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":13228792},"12":0}" data-sheets-value="{"1":2,"2":"VP / SVP"}" style="font-size:10pt;font-family:Arial;font-style:normal;">VP / SVP</span>
</span>
</div>
</div>
</label>
<label class="apt-survey-multi-choice-radio">
<input type="radio" value="d99a91b3-ac39-4534-bf6b" placeholder="" class="" name="apt-trigger-radio-8c027e80-2df7-494a-a3a5" tabindex="31771">
<div class="apt-survey-multi-choice-radio-label">
<div class="multi-survey-answer">
<meta charset="utf-8">
<style type="text/css">
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}
-->
</style>
<span data-sheets-userformat="{"2":515,"3":{"1":0},"4":{"1":2,"2":13228792},"12":0}" data-sheets-value="{"1":2,"2":"C Level"}" style="font-size:10pt;font-family:Arial;font-style:normal;">C Level</span>
</div>
</div>
</label>
</div>Is there a workaround for this? I requested the software be adjusted to include the <form> element but that could take months/years.
Does anyone have any suggestions on how I can apply CSS styling to a radio button outside of a <form> element?
Just to make things even more fun, I can only use CSS, and not JavaScript or HTML
Your selector input[type="radio"]:checked + label is looking for a label who is an immediate sibling of a :checked radio input, but your markup actually is
<label class="apt-survey-multi-choice-radio">
<input type="radio" ...>
...
</label>
So you need to target a label that contains a :checked radio input, and you could use :has()
label:has([type="radio"]:checked) {
background: yellow;
}<label>
<input type="radio" />
Label
</label>