如何更改禁用和选中复选框的样式？-解网

问：

我想将选中和禁用的复选框更改为绿色。我尝试更改背景颜色、颜色、强调色和轮廓 - 只是轮廓发生了变化，所以我有带有绿色轮廓的灰色复选框。您知道如何将复选框更改为绿色或准备好一些 img 之类的吗？

HTML格式：

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

CSS：

input[type=checkbox][disabled]:checked {
outline:2px solid green;
accent-color: green !important;
background-color: #FA9E57 !important;
}

CSS AngularJS 复选框

/* add custom checkbox to container with disabled checked checkbox */
.checkbox-container:has(> input:disabled:checked)::after {
    width: 10px;
    height: 10px;
    font-size: 9px;
    background: green;
    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>

上一个：旋转画布元素然后尝试使用 interactjs 调整其大小时出现问题

下一个：样式设置为 ng-option

如何更改禁用和选中复选框的样式？

How to change a style of disabled and checked checkbox?

评论