How to change the color on checkmark on disabled checkbox

Question

Here is example of my CSS:

.checkbox { 

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

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

So the border: 2px solid white; is changing the color of the checkmark. But in both situations, when checkbox is disabled and enabled.

I need to change the color of the ckeckmark in black only if its disabled.

If i try to change here &:disabled{...} It is changing the color only on the border and not on the checkmark.

Does someone know how to change the color on checkmark in disabled checkbox?

Can you create a small snippet of it inside codesandbox or any other platform? — Sulman Azhar, May 31 '21 at 08:27
@SulmanAzhar here is the link of the example https://codepen.io/FreshMaster/pen/eYveXda?editors=1111 — Kate, May 31 '21 at 09:27

score 1 · Answer 1 · answered May 31 '21 at 08:52

Checkboxes are inherently annoying. There isn't an easy way to change checkboxes. Here I'll provide a custom checkbox that is easily changeable.

* {
    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>

Well, maybe [this](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) will help you. — borisnliscool, May 31 '21 at 09:37

How to change the color on checkmark on disabled checkbox

1 Answers1