How to Style a Disabled Checkbox - Html

CodeNovice
March 15, 2023
214 views
2 votes
4 Answers

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">&nbsp;</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:

Tags: css html

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

.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
  background-color: #89c12d;
}
.switch-input:checked + .switch-label::after {
  left: 24px;
}




body {
  text-align: center;
  padding: 2rem;
}



accent-color does not have any effect of disabled input[type=checkbox]

Initial code source :: // Learn about this technique:
// @link https://moderncss.dev/pure-css-custom-checkbox-style/

HTML

<form action="">
  <label class="form-control">
    <input type="checkbox" name="checkbox" />
    Checkbox
  </label>

  <label class="form-control">
    <input class="dbl" type="checkbox" name="checkbox-checked" checked />
    Checkbox - checked
  </label>

  <label class="form-control form-control--disabled">
    <input type="checkbox" name="checkbox-disabled" disabled />
    Checkbox Disabled
  </label>

  <label class="form-control form-control--disabled">
    <input class="dred" type="checkbox" name="checkbox-disabled-checked" checked disabled />
    Checkbox Disabled - checked
  </label>
</form>

CSS

      :root {
  --form-control-color: rebeccapurple;
  --form-control-disabled: #959495;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

form {
  display: grid;
  place-content: center;
  min-height: 100vh;
}

.form-control {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

.form-control + .form-control {
  margin-top: 1em;
}

.form-control--disabled {
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

.dbl::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em black;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

.dred::before
{
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em red;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid red;
  outline-offset: max(2px, 0.15em);
}

input[type="checkbox"]:disabled {
  --form-control-color: red;
  opacity: 0.5;
  color: red;
  cursor: not-allowed;
}

- Joe
- March 15, 2023 at 11:57 pm
- 0 votes
0
Here is an example on how you could make a disabled checkbox look normal with CSS.
```
.disabled-checkbox {
   opacity: 0.5; /* Reduce the opacity of the checkbox */
   cursor: not-allowed; /* Change the cursor to indicate that the checkbox is disabled */
   pointer-events: none; /* Disable pointer events to prevent user interaction */
```
Login or Signup to reply.

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.

const disabledInputs = document.querySelectorAll('td > input[disabled]');
disabledInputs.forEach(input => {
  const label = document.createElement('label');
  label.classList.add('specialinsert');
  input.parentElement.prepend(label);

});

td>label.specialinsert+input {
  opacity: 0;
}

td>label.specialinsert {
  background-color: blue;
  width: 10px;
  height: 10px;
  display: inline-block;
}

<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">&nbsp;</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 (pamphlet, sign, flyer, etc.) or verbal referral (simply telling)</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>

Please signup or login to give your own answer.

Click here to cancel reply.

How to Style a Disabled Checkbox – Html

Answers