input[type="checkbox"]:disabled + label::before{
background: gray;
}
input[type="checkbox"]:disabled + label:hover::before{
background: gray;
border: 1px solid #d4d4d5;
}
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet" />
<div class="ui disabled checkbox">
<input type="checkbox" disabled="disabled">
<label>Disabled</label>
</div>
<br/>
<div class="ui disabled checkbox">
<input type="checkbox">
<label>Abled</label>
</div>
这是一个使用 CSS 将复选框图像添加到输入的父级的解决方案。在此示例中,仅对禁用的选中复选框进行样式设置,并且可以完全自定义。
/* add custom checkbox to container with disabled checked checkbox */
.checkbox-container:has(> input:disabled:checked)::after {
width: 10px;
height: 10px;
font-size: 9px;
background: #8585cf;
display: inline-block;
border: 1px solid #000000;
border-radius: 3px;
color: white;
position: relative;
content: "✔";
text-align: center;
float: left;
margin: 3px 4px 0 5px;
}
/* remove display of default disabled checked checkbox */
.checkbox-container input:disabled:checked {
display: none
}
With new styling:
<div class="checkbox-container">
<input type="checkbox" id="cb-enabled-1" checked="checked"/><label for="cb-enabled-1">Enabled Checkbox</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="cb-disabled-unchecked-1" disabled="disabled" /><label for="cb-disabled-unchecked-1">Disabled Checkbox - Unchecked</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="cb-disabled-checked-1" checked="checked" disabled="disabled"/><label for="cb-disabled-checked-1">Disabled Checkbox - Checked</label>
</div>
<br>
Browser Default Styling:
<div>
<input type="checkbox" id="cb-enabled-2" checked="checked"/><label for="cb-enabled-2">Enabled Checkbox</label>
</div><div>
<input type="checkbox" id="cb-disabled-unchecked-2" disabled="disabled" /><label for="cb-disabled-unchecked-1">Disabled Checkbox - Unchecked</label>
</div><div>
<input type="checkbox" id="cb-disabled-checked-2" checked="checked" disabled="disabled" /><label for="cb-disabled-checked-2">Disabled Checkbox - Checked</label>
</div>