如何修改禁用状态复选框的选中颜色提升勾选可见性

问题背景 #

表格内嵌套的ASP.NET复选框控件在页面只读状态下会自动添加禁用属性，默认浏览器渲染的禁用复选框勾选标记颜色过浅、边框对比度低，勾选状态难以辨识。直接套用自定义复选框样式时曾出现控件完全不显示的异常。
现有页面核心代码如下：

<table>
  <tr>
    <th colspan="3" style="width: 1800px;">
      <asp:Literal ID="litLabel" runat="server" Text="Service Team" />
    </th>
  </tr>

  <tr id="trSignature" runat="server">
    <td class="boldfont ">
      &nbsp;&nbsp;
      <asp:Label ID="lblSignature" runat="server" Text="61" />
    </td>
    <td class="boldfont">
      &nbsp;<input ID="tlblSignature" runat="server" LabelForControl="lblSignature" Text="Certification of Service Coordinator Signature" IsRequiredField="false" />
    </td>
    <td class="ControlLayoutWidth">
      &nbsp;<input type="checkbox" ID="chkSignature" runat="server" IsRequiredField="false" FriendlyFieldName="Signature" AutoPostBack="true">
      </>
    </td>
  </tr>
</table>

实现方案 #

之前自定义样式后复选框消失，核心原因是大部分自定义复选框方案会先隐藏原生input控件，靠相邻伪元素/标签绘制自定义外观，如果没有补全禁用状态对应的样式规则，原生控件被隐藏后没有替代元素渲染，就会出现控件完全不显示的问题。
优先推荐用原生属性增强的方案，不需要改动现有DOM结构，兼容性最好，不会出现控件消失的问题。

方案1：原生样式增强（推荐） #

直接通过CSS针对禁用状态的复选框调整边框亮度、设置勾选主色，不需要隐藏原生控件，适配所有现代浏览器，直接把以下代码加入全局样式表即可生效：

/* 禁用状态复选框：提升边框对比度 */
input[type="checkbox"]:disabled {
  width: 16px;
  height: 16px;
  border: 2px solid #757575 !important;
  background-color: #ffffff !important;
  cursor: not-allowed;
}

/* 禁用+选中状态：强化勾选标记颜色 */
input[type="checkbox"]:checked:disabled {
  /* 现代浏览器原生属性，直接设置表单控件主色，勾选标记会自动适配高对比度 */
  accent-color: #165DFF;
  /* 旧浏览器兜底：用内阴影强化勾选区域显示 */
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #165DFF;
}

这个方案不会改动现有ASP.NET控件的渲染逻辑，也不需要调整服务端代码，样式权重加!important可以覆盖浏览器默认的禁用态浅灰样式，勾选标记和边框的辨识度会明显提升。

方案2：全自定义样式（兼容旧浏览器） #

如果需要兼容不支持accent-color的极旧浏览器，可以用自定义绘制方案，注意必须补全禁用状态的样式规则，避免控件消失：

1. 首先添加自定义样式：

/* 隐藏原生复选框，不要用display:none，否则会丢失表单提交能力 */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 复选框容器 */
.cb-wrap {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* 自定义复选框外观 */
.cb-mark {
  position: absolute;
  inset: 0;
  border: 2px solid #666666;
  background: #ffffff;
}

/* 选中状态基础样式 */
.cb-wrap input:checked ~ .cb-mark {
  background: #165DFF;
  border-color: #165DFF;
}

/* 禁用状态样式：这部分漏写就会导致控件消失 */
.cb-wrap input:disabled ~ .cb-mark {
  border-color: #757575;
  background: #f5f5f5;
  cursor: not-allowed;
}

/* 禁用+选中状态：高对比度勾选效果 */
.cb-wrap input:checked:disabled ~ .cb-mark {
  background: #165DFF;
  border-color: #0E42D2;
}

/* 绘制白色对勾标记 */
.cb-mark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cb-wrap input:checked ~ .cb-mark::after {
  display: block;
}

2. 给现有复选框套一层容器即可，修改对应td内的代码：

<td class="ControlLayoutWidth">
  &nbsp;
  <span class="cb-wrap">
    <input type="checkbox" ID="chkSignature" runat="server" IsRequiredField="false" FriendlyFieldName="Signature" AutoPostBack="true">
    <span class="cb-mark"></span>
  </span>
</td>

内容的提问来源于stack exchange，提问作者AMDI