如何修改已勾选且禁用状态的复选框样式？

开发者阿泽

2026-7-13

解决禁用勾选状态复选框的绿色样式问题

原生复选框在禁用状态下，浏览器默认样式优先级极高，直接修改background-color或accent-color往往无法生效，以下是两种可行的解决方案：

方案1：自定义复选框样式（推荐，无浏览器兼容性问题）

完全替换原生复选框外观，摆脱浏览器默认样式限制，步骤如下：

调整HTML结构：给标签添加类名便于样式控制

<label class="custom-checkbox">
    <input type="checkbox" ng-model="t.isCorrected" disabled checked/> 
    {{('sth.isCorrectedLabel') | translate}}
</label>

编写CSS样式：隐藏原生控件，用伪元素模拟自定义效果

/* 隐藏原生复选框，保留功能 */
.custom-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
    position: relative;
    cursor: not-allowed;
}

/* 禁用且勾选时的主体样式 */
.custom-checkbox input[type="checkbox"][disabled]:checked {
    background-color: green;
    border-color: green;
}

/* 模拟勾选的白色对号 */
.custom-checkbox input[type="checkbox"][disabled]:checked::after {
    content: "\2713";
    position: absolute;
    color: #fff;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 保持标签与复选框的对齐布局 */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

方案2：利用滤镜强制改色（兼容性有限）

通过filter属性调整浏览器默认灰色为绿色，仅部分浏览器生效：

input[type=checkbox][disabled]:checked {
    outline: 2px solid green;
    accent-color: green !important;
    /* 通过色相旋转将灰色转为绿色，可根据实际调整角度 */
    filter: hue-rotate(90deg);
}