如何更改禁用复选框上复选标记的颜色

Question

这是我的 CSS 示例：

.checkbox { 

input[type='checkbox'] {
&+label{
&:after {
content: '';
border: 2px solid white
}}

&:disabled{
&+label{
&+:before{
opacity: .7;
}}
}}
}

所以 border: 2px solid white; 正在改变复选标记的颜色。但在这两种情况下，当复选框被禁用和启用时。

只有当它被禁用时，我才需要将它的颜色更改为黑色。

如果我尝试在这里更改 &:disabled{...} 它只会更改边框上的颜色，而不是复选标记上的颜色。

有人知道如何更改禁用复选框中复选标记的颜色吗？

Answer 1

复选框本身就很烦人。没有一种简单的方法可以更改复选框。在这里，我将提供一个易于更改的自定义复选框。

* {
    margin: 0;
    padding: 0;
    --main-color: #1589FF;
}

.checkbox__group {
    display: inline-flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    user-select: none;
    font-size: 20px;
    margin-bottom: 10px;
}

.checkbox__group:hover {
    cursor: pointer;
}

.checkbox__original {
    display: none;
}

.checkbox__custom {
    width: 1.5em;
    height: 1.5em;
    border-radius: 4px;
    border: .1em solid #ccc;
    text-align: center;
    color: white;
    transition: background .2s, border-color .2s;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    margin-right: .5em;
    flex-shrink: 0;
    content: '';
    user-select: none;
}

.checkbox__custom::after {
    content: '\2714';
    transform: scale(0);
    transform: rotate(0deg);
    transition: transform .2s;
}

.checkbox__group:focus {
    outline: none;
}

.checkbox__group:focus .checkbox__custom{
    border: .1em solid var(--main-color);
    outline: none;
}

.checkbox__original:checked + .checkbox__custom {
    background: var(--main-color);
    border: .1em solid var(--main-color);
}

.checkbox__original:checked + .checkbox__custom::after { 
    transform: scale(1);
    transform: rotate(360deg);
}

<label for="checkbox" id="checkbox__group" class="checkbox__group">
  <input type="checkbox" id="checkbox" name="checkbox" class="checkbox__original">
  <div class="checkbox__custom"></div>
  Hello!
</label>