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

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?

Answer 1

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>