Question

这是我的 CSS 示例：

   {
     _id:{category:categoryName,id:xxxxxx},
     amount:300
   }
   {
     _id:{category:categoryName,id:xxxxxx},
     amount:200
    }

所以 .checkbox { input[type='checkbox'] { &+label{ &:after { content: ''; border: 2px solid white }} &:disabled{ &+label{ &+:before{ opacity: .7; }} }} } 正在改变复选标记的颜色。但在这两种情况下，当复选框被禁用和启用时。

只有在禁用时，我才需要将 ckeckmark 的颜色更改为黑色。

如果我在这里尝试更改 border: 2px solid white; 它只会在边框上更改颜色，而不是在复选标记上更改颜色。

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

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>

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

1 个答案: