How to Style a Disabled Checkbox

Question

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:

I would ignore using the traditional checkboxes and use CSS checkboxes instead. They will give you more design capabilities. It does require more CSS but you have more control over the output. One way is covered at W3 Schools (I know I know its W3Schools but this is an example that works). You can add another style for disabled https://www.w3schools.com/howto/howto_css_custom_checkbox.asp — imvain2, Mar 15 '23 at 21:59
does this help https://stackoverflow.com/a/25308210/9142870? — TobyLoby, Mar 15 '23 at 22:00
I do not have a choice in the matter. My production site uses standard checkboxes. — Code Novice, Mar 15 '23 at 22:00
Why not just hide the disabled checkbox completely and replace it with an element styled as you need? Typically this is done with a combination of pseudo-elements and the `` element — j08691, Mar 15 '23 at 22:01
If it's true that it is impossible to alter the default checkbox when they are disabled I might not have a solution. I can apply styles against the existing page elements but I am not able to change the elements. By the very nature of the customizable system I work with. The elements themselves are not customizable. — Code Novice, Mar 15 '23 at 22:03
Are you saying that you cannot add any HTML of your own? If so, please could you show us the structure of the HTML around the input, just in case there is a way of adding something to that to give the appearance you want. Incidentally, what appearance do you want? — A Haworth, Mar 15 '23 at 22:07
@AHaworth That is correct. The database stores the page information, sql, elements, javascript to then be rendered via aspx services. I can apply my own elements however any system generated elements like checkboxes are not elements I have access to rewrite. I am not updating any server side code which is what generates the page dynamically. I am left with a rendered page that I am now able to style and if needed I can render my own elements but that still leaves me with a bunch of disabled checkboxes I am not able to style. — Code Novice, Mar 15 '23 at 22:13
The last solution would be for me to submit a product request to then have the core code updated by engineering and go thru QA and maybe a few months later we'll have some custom checkboxes. I am looking for a solution to my problem sooner rather than later should one exist. — Code Novice, Mar 15 '23 at 22:15
I will need to spend a small amount of time trimming. I absolutely cannot paste all of the code here. The system I manage requires authentication and the pages I work with are never public. Regardless I will simply do what I need and strip out all of the useless stuff. In a very short summary... Main Page > embedded iFrame > html > tbody > thead > tr > td > div > input[disabled] — Code Novice, Mar 15 '23 at 22:21
If you can add your own javascript, you can use that to replace the elements with custom elements. — imvain2, Mar 15 '23 at 22:23
See https://stackoverflow.com/help/minimal-reproducible-example - assuming all the required inputs have some sort of common structure around them. However, I am a bit concerend about the code you have just given. Are you saying it's in an iFrame. If so do you have any control over that? — A Haworth, Mar 15 '23 at 22:25
The link you pasted I've read so many times. That's exactly why my code contains ONLY two checkboxes. One of them is default. And the other is disabled. However, I'll provide you with the surrounding (not so minimal) html. Stand by... this may take a bit. Conflicting sort of to ask for minimal code but to then ask for more code however I understand and am eager to solve this if possible. — Code Novice, Mar 15 '23 at 22:32
The only reason for asking for more is that you can't play around with the input element itself very much but it may be possible to attach a pseudo element to a parent or neighbour. — A Haworth, Mar 15 '23 at 22:34
@AHaworth Understood. I'm not a front end web developer. My main skillset is the data however there are times I need to make visual front-end adjustments where I am able to. I have added the most basic version of the html I could create and it is available in the post. — Code Novice, Mar 15 '23 at 23:41
I am interested in the possibility of removing the existing Checked checkboxes and replacing them with a non functional version. It sounds more involved than the solution I was hoping existed which is simply the option of styling the disabled checkbox directly. — Code Novice, Mar 15 '23 at 23:56
AfraidIcan't see a way of doing this - the inputs are within td elements which cannot have before pseudo elements so there's no route there. Also, do you have control of that iframe because if not I don't see how you can do any styling of its contents. — A Haworth, Mar 16 '23 at 00:23
The code I provided is the inner iFrame html document... I do not have access to the style sheets being loaded into the browser however the styling I have access to is to insert a Style Tag into the iFrame. I can also insert script tags. — Code Novice, Mar 16 '23 at 01:11
As you can nset script tags you could go through giving each of those inputs a label element associated with it and make the actual input opacity 0 for example and style the label. — A Haworth, Mar 16 '23 at 08:55

score 1 · Accepted Answer · answered Mar 16 '23 at 09:19

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>

Nice work thank you. Answer accepted. – Code Novice Mar 16 '23 at 18:23 — Code Novice, Mar 16 '23 at 18:23

score 0 · Answer 2 · answered Mar 15 '23 at 22:07

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]

mmirbekian · Answer 3 · 2023-03-16T01:52:26.023

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;
}

OP asks "How do I make my disabled checkbox look like it is NOT disabled?" - so this seems to be the opposite of what OP wants. You are making an enabled checkbox look disabled, OP wants a disable checkbox to look enabled. — Stephen P, Mar 15 '23 at 23:44
@mmirbekian Do you have this working? You tested this? If this works show me. I was temporarily hopeful that adding !important to the property would work. But it does not. Am I not understanding your solution? What am I missing? — Code Novice, Mar 16 '23 at 00:14
The Checkboxes in your example are NOT disabled. Please go ahead and set them to disabled and let me know if you get it to work after having done so. — Code Novice, Mar 16 '23 at 01:06
The question was: How do I style a disabled checkbox? You ended up styling a checkbox that was not disabled. I don't need to know how to style a checkbox. I need to know how to style a disabled checkbox. I appreciated the time nonetheless. — Code Novice, Mar 16 '23 at 01:37
@CodeNovice Got it ! I'm changing the code I found from a website. I think you will like it! — mmirbekian, Mar 16 '23 at 01:40
This is the final link : https://codepen.io/Avi-Qiyan/pen/poOVQJx — mmirbekian, Mar 16 '23 at 01:51
Nice work and very cool to see. While I didn't go with this approach I've added a one up to your answer. — Code Novice, Mar 16 '23 at 18:23
@CodeNovice It's totally fine .. The goal was to get you the help that you needed — mmirbekian, Mar 16 '23 at 20:16

score 0 · Answer 4 · answered Mar 15 '23 at 22:57

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 */

answered Mar 15 '23 at 22:57

joe

1

You say "make a disabled checkbox look normal" but your styles, like `cursor: not-allowed` would make an _enabled_ checkbox look and act like a _disabled_ checkbox. You are not "mak[ing] a disabled checkbox look normal" but instead you are 'making a normal checkbox look (and act) disabled' – Stephen P Mar 16 '23 at 18:00

How to Style a Disabled Checkbox

4 Answers4