[SOLVED] How to change disabled checkbox color

How to change disabled checkbox color

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?

Solution

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>