CSS中如何为disabled状态设置多个对应不同样式的自定义命名？

实现方案 #

首先明确：disabled是HTML原生标准属性，:disabled是CSS官方伪类，无法自定义重命名为disabledBlue直接使用，也不能用自定义属性替代原生disabled，否则复选框的禁用交互功能会失效。我们可以通过「保留原生disabled属性 + 自定义属性区分样式」的方式实现需求：

1. 修改CSS代码 #

保留原有灰色禁用样式，新增蓝色禁用的属性选择器：

.overall-example input[type=checkbox]:checked + label {
    background-color: #8cecbf;
    opacity: 1;
}

/* 默认禁用样式：灰色背景 */
.overall-example input[type=checkbox]:disabled + label {
    background-color: #424242;
    opacity: 1;
}

/* 蓝色禁用样式：匹配同时开启禁用、且自定义主题为blue的复选框 */
.overall-example input[type=checkbox]:disabled[data-disabled-theme="blue"] + label {
    background-color: #4896aa;
    opacity: 1;
}

2. 修改JS代码 #

需要蓝色禁用效果的复选框，在设置原生disabled属性的同时，追加自定义主题属性即可：

// example1-checkbox禁用时显示灰色背景：仅设置原生disabled属性
document.getElementById('example1-checkbox').disabled = true;

// example2-checkbox禁用时显示蓝色背景：设置原生disabled保证功能，追加自定义属性触发蓝色样式
const example2Checkbox = document.getElementById('example2-checkbox');
example2Checkbox.disabled = true;
example2Checkbox.dataset.disabledTheme = 'blue';

补充说明 #

如果需要将复选框恢复为启用状态，同步清理自定义属性即可：

example2Checkbox.disabled = false;
delete example2Checkbox.dataset.disabledTheme;

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