How to change disabled checkbox color

Question

i want to override the semantic ui css for disabled checkbox, since i'm not good at css i don't which role i should override.

<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<div class="ui disabled checkbox">
  <input type="checkbox" disabled="disabled">
  <label>Disabled</label>
</div>
<div class="ui disabled checkbox">
  <input type="checkbox" disabled="disabled">
  <label></label>
</div>

From the snippet above it seems that they are styling the label. How can i set the box of checkbox color to something like grey or any darker color?

George

Answer 1

input[type="checkbox"]:disabled + label::before{
  background: gray;
}
input[type="checkbox"]:disabled + label:hover::before{
  background: gray;
  border: 1px solid #d4d4d5;
}

<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet" />
<div class="ui disabled checkbox">
  <input type="checkbox" disabled="disabled">
  <label>Disabled</label>
</div>
<br/>
<div class="ui disabled checkbox">
  <input type="checkbox">
  <label>Abled</label>
</div>

Pacificas

Answer 2

Here is a solution that uses CSS to add an image of a checkbox to the parent of the input. In this example only a disabled checked checkbox is styled, and can be customized completely.

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

Variation