Direct answer to this question would be to answer "How do I make my disabled checkbox look like it is NOT disabled?"
I have been attempting to style a disabled checkbox however I have been unsuccessful. There are many posts saying it can be done and I’ve pasted below two of them.
How to style a disabled checkbox?
How to style a checkbox using CSS
The main points I took out of these answers is I am needing to locate the disabled element using CSS selectors similar to the css shown in the code snippet.
No matter what I do I am not able to change the look/appearance of any disabled checkbox. Is this possible? Any style I apply works for enabled checkboxes using the information stated in the 2nd SO Post I provided.
Simple HTML
input[disabled] {
accent-color: red;
}
input:disabled {
accent-color: red;
}
<input type="checkbox" checked onclick="showOccur(event)" ;/>
<input type="checkbox" checked onclick="showOccur(event)" ; disabled/>
Screenshot of Checkboxes using default Chrome browser styles
Per request: Stripped down non minimal html of disabled checkboxes in a table
<html lang="en" style="--backdrop-filter:blur(1px); width: 100%; height: 100%;" data-default-button="NONE"><head><script async="" src="https://www.google-analytics.com/analytics.js"></script><script language="javascript" type="text/javascript">(window.Promise || document.write('<script language="javascript" type="text/javascript" src="/Content/promise/es6-promise.min.js"><'+'/script>'));</script>
<div class="FormPages has-v-scrollbar" style="height: 684px;">
<div id="Renderer_Page1_body" class="Page card" pageindex="0">
<div class="Body card-body">
<h2 class="PageHeader"><a class="Title card-title" id="RendererPage1" name="RendererPage1" role="heading">Form Page - Alter Disabled Checkboxes CSS</a>
</h2>
<div class="Description" role="note" style="display: none;"></div>
<div id="Renderer_Page1" class="FormContainer" rendererid="Renderer" helptext="NONE">
<div class="FormButtons top"></div>
<table class="FormPage" align="center" role="presentation">
<colgroup><col style="width:35%"><col><col></colgroup>
<tbody>
<tr>
<td id="Label1000023099_Renderer" dm="CT_ReferralsEducation_AssessmentID" style="text-align: center; display: none" colspan="3" nosiblings="true"><nobr><label for="1000023099_Renderer" id="LBL1000023099_Renderer">Assessment</label>:</nobr><br>
<input type="hidden" id="1000023099_Renderer" name="1000023099_Renderer" value="309" class="form-control"><div style="display: none;">No Assessment Selected</div><table aria-label="Master Assessment ID: 309" cellpadding="2" cellspacing="0" class="PluginTable"><thead><tr><th>Date</th><th style="display: none;">Program</th><th>Type</th><th>User</th></tr></thead><tbody><tr><td id="1000023099_Renderer_Date">3/14/2023</td><td id="1000023099_Renderer_Program" style="display: none;"></td><td id="1000023099_Renderer_Type">Initial (Entry)</td><td id="1000023099_Renderer_User">Stuart Black</td></tr></tbody></table></td>
</tr>
<tr>
<td id="Label1000023100_Renderer" dm="CT_ReferralsEducation_AssessmentDate" class="LabelStyle"><label for="1000023100_Renderer" id="LBL1000023100_Renderer">Assessment Date</label>:</td><td class="RequiredStyle"> </td>
<td class="FieldStyle"><span id="1000023100_Renderer_Display" class="form-control-static">3/14/2023</span><input type="hidden" id="1000023100_Renderer" value="3/14/2023 12:00:00 AM" data-ros="true" data-format="d" class="form-control"></td>
</tr>
</tbody>
</table>
<div id="Label1000023121_Renderer" dm="ReferralsSectionHeader" class="SectionHeadingStyle" nosiblings="true"><div><label>Referrals</label><div class="section-content" id="content_1000023121_Renderer">For each referral, check whether it was written referral or verbal referral</div></div></div>
<div id="Label1000023158_Renderer" dm="SubRendererReferralsProvided" nosiblings="true"><div id="SFCRendererSF1" class="SubFormContainer">
<div class="seperator"></div><div id="RendererSF1_Page1" class="FormContainer" rendererid="RendererSF1" helptext="NONE" pageindex="0">
<div class="FormButtons top"></div>
<div rendererid="RendererSF1" editelement="1000023153_RendererSF1" class="ResultContainer" helptext="NONE" height="FILL" spreadsheet="true" style="">
<table cellpadding="0" cellspacing="0" class="ResultSet table Spreadsheet table-hover hide-cbx" aria-readonly="true" id="RendererSF1ResultSet" role="grid" data-align="left">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col style="text-align: center">
</colgroup>
<thead>
<tr onselectstart="CancelEvent(event);" ondragstart="CancelEvent(event);">
<th class="icons" scope="col"><span class="sr">Buttons and actions</span><input type="checkbox" class="form-checkbox" id="CheckAllRendererSF1" disabled="disabled" onclick="CheckAll(event);">
<label for="CheckAllRendererSF1" class="sr">Check all rows in the grid</label>
</th>
<th datacolumn="CT_ReferralsProvided.ReferralsProvidedID" data-eid="1000023153_RendererSF1" style="text-align:right;display:none" data-group-ordinal="0" id="1000023153_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="-desc col-sort col-sort-desc" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Hidden - Referrals Provided ID</a></th>
<th datacolumn="Code.CodeID" data-eid="1000023162_RendererSF1" style="text-align:right;display:none" data-group-ordinal="0" id="1000023162_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="-asc col-sort col-sort-asc col-sort-primary" aria-label="Click to sort in descending order" data-rsti="0" tabindex="-1">Hidden - Code ID (Do Not Remove Or Form will Break)<span class="RequiredStyle">*</span></a></th>
<th datacolumn="Code.Description" data-eid="1000023161_RendererSF1" data-group-ordinal="0" id="1000023161_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Referrals Provided</a></th>
<th datacolumn="CT_ReferralsProvided.WrittenHandOut" data-eid="1000023155_RendererSF1" style="text-align:left" data-group-ordinal="0" id="1000023155_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Written Hand Out</a></th>
<th datacolumn="CT_ReferralsProvided.Verbal" data-eid="1000023156_RendererSF1" style="text-align:left" data-group-ordinal="0" id="1000023156_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Verbal</a></th>
<th datacolumn="DetectOther" data-eid="1000023173_RendererSF1" style="display:none" data-group-ordinal="0" id="1000023173_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" aria-disabled="true" tabindex="-1" class="">CT_ReferralsProvided.DetectOther</a></th>
<th scope="col"><span class="sr">Undo changes</span></th>
</tr>
</thead>
<tbody data-help="NONE" aria-readonly="true">
<tr key="15" aria-posinset="5" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
<td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF115" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF115" id="SAVERendererSF115" class="form-control"></td>
<td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF115" name="1000023153_RendererSF115" value="15" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
<td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF115" name="1000023162_RendererSF115" value="1000000033" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
<td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF115_Display" class="form-control-static">Medicaid</span><input type="hidden" id="1000023161_RendererSF115" value="Medicaid" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
<td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF115" name="1000023155_RendererSF115" disabled="" value="Y" data-key="15" aria-labelledby="aria_1000023155_RendererSF1"></td>
<td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF115" name="1000023156_RendererSF115" disabled="" value="Y" data-key="15" aria-labelledby="aria_1000023156_RendererSF1"></td>
<td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF115_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF115" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
<td id="INFORendererSF115"><button id="UNDORendererSF115" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
<tr key="26" aria-posinset="6" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
<td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF126" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF126" id="SAVERendererSF126" class="form-control"></td>
<td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF126" name="1000023153_RendererSF126" value="26" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
<td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF126" name="1000023162_RendererSF126" value="1000000044" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
<td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF126_Display" class="form-control-static">Health Care Services</span><input type="hidden" id="1000023161_RendererSF126" value="Health Care Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
<td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF126" name="1000023155_RendererSF126" checked="Checked" disabled="" value="Y" data-key="26" aria-labelledby="aria_1000023155_RendererSF1"></td>
<td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF126" name="1000023156_RendererSF126" disabled="" value="Y" data-key="26" aria-labelledby="aria_1000023156_RendererSF1"></td>
<td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF126_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF126" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
<td id="INFORendererSF126"><button id="UNDORendererSF126" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
<tr key="28" aria-posinset="7" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
<td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF128" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF128" id="SAVERendererSF128" class="form-control"></td>
<td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF128" name="1000023153_RendererSF128" value="28" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
<td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF128" name="1000023162_RendererSF128" value="1000000046" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
<td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF128_Display" class="form-control-static">Maternal Health Services</span><input type="hidden" id="1000023161_RendererSF128" value="Maternal Health Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
<td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF128" name="1000023155_RendererSF128" disabled="" value="Y" data-key="28" aria-labelledby="aria_1000023155_RendererSF1"></td>
<td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF128" name="1000023156_RendererSF128" disabled="" value="Y" data-key="28" aria-labelledby="aria_1000023156_RendererSF1"></td>
<td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF128_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF128" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
<td id="INFORendererSF128"><button id="UNDORendererSF128" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
<tr key="29" aria-posinset="8" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
<td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF129" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF129" id="SAVERendererSF129" class="form-control"></td>
<td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF129" name="1000023153_RendererSF129" value="29" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
<td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF129" name="1000023162_RendererSF129" value="1000000047" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
<td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF129_Display" class="form-control-static">Legal Services</span><input type="hidden" id="1000023161_RendererSF129" value="Legal Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
<td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF129" name="1000023155_RendererSF129" checked="Checked" disabled="" value="Y" data-key="29" aria-labelledby="aria_1000023155_RendererSF1"></td>
<td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF129" name="1000023156_RendererSF129" disabled="" value="Y" data-key="29" aria-labelledby="aria_1000023156_RendererSF1"></td>
<td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF129_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF129" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
<td id="INFORendererSF129"><button id="UNDORendererSF129" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
<tr key="33" aria-posinset="12" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
<td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF133" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF133" id="SAVERendererSF133" class="form-control"></td>
<td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF133" name="1000023153_RendererSF133" value="33" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
<td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF133" name="1000023162_RendererSF133" value="1000000051" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
<td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF133_Display" class="form-control-static">STD Testing</span><input type="hidden" id="1000023161_RendererSF133" value="STD Testing" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
<td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF133" name="1000023155_RendererSF133" disabled="" value="Y" data-key="33" aria-labelledby="aria_1000023155_RendererSF1"></td>
<td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF133" name="1000023156_RendererSF133" disabled="" value="Y" data-key="33" aria-labelledby="aria_1000023156_RendererSF1"></td>
<td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF133_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF133" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
<td id="INFORendererSF133"><button id="UNDORendererSF133" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
<tr key="34" aria-posinset="13" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
<td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF134" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF134" id="SAVERendererSF134" class="form-control"></td>
<td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF134" name="1000023153_RendererSF134" value="34" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
<td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF134" name="1000023162_RendererSF134" value="1000000052" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
<td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF134_Display" class="form-control-static">STD Treatment</span><input type="hidden" id="1000023161_RendererSF134" value="STD Treatment" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
<td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF134" name="1000023155_RendererSF134" disabled="" value="Y" data-key="34" aria-labelledby="aria_1000023155_RendererSF1"></td>
<td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF134" name="1000023156_RendererSF134" disabled="" value="Y" data-key="34" aria-labelledby="aria_1000023156_RendererSF1"></td>
<td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF134_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF134" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
<td id="INFORendererSF134"><button id="UNDORendererSF134" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
<tr key="16" aria-posinset="14" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
<td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF116" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF116" id="SAVERendererSF116" class="form-control"></td>
<td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF116" name="1000023153_RendererSF116" value="16" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
<td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF116" name="1000023162_RendererSF116" value="1000000034" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
<td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF116_Display" class="form-control-static">HIV Treatment</span><input type="hidden" id="1000023161_RendererSF116" value="HIV Treatment" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
<td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF116" name="1000023155_RendererSF116" disabled="" value="Y" data-key="16" aria-labelledby="aria_1000023155_RendererSF1"></td>
<td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF116" name="1000023156_RendererSF116" checked="Checked" disabled="" value="Y" data-key="16" aria-labelledby="aria_1000023156_RendererSF1"></td>
<td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF116_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF116" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
<td id="INFORendererSF116"><button id="UNDORendererSF116" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
Screenshot of non minimal version:
4
Answers
It’s rather hacky. To get results you d better hide the default layout and redesign your own.
Like here: https://codepen.io/chriscoyier/pen/JjozJLv
Initial code source :: // Learn about this technique:
// @link https://moderncss.dev/pure-css-custom-checkbox-style/
HTML
CSS
Here is an example on how you could make a disabled checkbox look normal with CSS.
As you can add JavaScript to the code which will be shown in the iFrame you can go through adding for example a label element associated with each disabled input, set the actual input to opacity 0 for example and instead show the label element, formatted as you want it.
I do not know how you want it to look so this snippet just puts in a blue square.
Obviously you’ll need to check that the code selects exactly all those inputs which are of interest.