Want to change color of checkbox with checked + disabled attribute, but not similar to just disabled attribute

Question

I have different checkboxs with different functions, which is working well. My requirement is that I want to change the color of checkbox with "checked" & "disabled" attribute at a same time i.e my last checkbox . But not similar to checkbox with just "disabled" attribute in it i.e my third checkbox. Thank you in advance.

.switch, .switch {
    -moz-user-select: none;
}
.switch label input[type="checkbox"] {
    height: 0;
    opacity: 0;
    width: 0;
}
.switch label input[type="checkbox"]:not(:checked), 
.switch label input[type="checkbox"]:checked {
    left: -9999px;
    opacity: 0;
    position: absolute;
}
.switch label input[type="checkbox"]:checked + .lever::after {
    background-color: #629fd9;
    left: 14px;
}
.switch label input[type="checkbox"]:disabled + .lever::after {
    background-color: #E6E6E6;
}
.switch label input[type="checkbox"]:disabled + .lever,
.switch label input[type="checkbox"][disabled="disabled"]:checked + .lever{
    background-color: #F0F0F0;
}

.switch label input[type="checkbox"][disabled="disabled"]:checked + .lever::after{
    background-color: #B3C6D8;
}
.switch label .lever::after {
    background-color: #C0C0C0;
    border-radius: 21px;
    content: "";
    display: inline-block;
    height: 13px;
    left: 0px;
    position: absolute;
    top: -3px;
    transition: left 0.3s ease 0s, background 0.3s ease 0s, box-shadow 0.1s ease 0s;
    width: 13px;
}
.switch label input[type="checkbox"]:checked + .lever {
    background-color: #DFDFDF;
}


.switch label .lever {
    background-color: #DFDFDF;
    border-radius: 15px;
    content: "";
    display: inline-block;
    height: 7px;
    margin: 0 16px;
    position: relative;
    transition: background 0.3s ease 0s;
    vertical-align: middle;
    width: 27px;
    margin-right: 4px;
}
.switch label {
    margin-left:-15px;
}

<div class="switch">
	<label>
	<input type="checkbox">
	<span class="lever"></span> <span>Option Unchecked</span> </label>
</div>
<div class="switch">
	<label>
	<input type="checkbox" checked>
	<span class="lever"></span> <span>Option Checked</span> </label>
</div>
<div class="switch">
	<label>
	<input type="checkbox" disabled>
	<span class="lever"></span> <span>Option Disabled</span> </label>
</div>
<div class="switch">
	<label>
	<input type="checkbox" disabled checked>
	<span class="lever"></span> <span>Option Checked and disabled</span> </label>
</div>

Answer 1

This should work

.switch label input[type="checkbox"][disabled]:checked + .lever {
    background-color: pink;
}

[disabled] is an attribute but :checked is a pseudo-class and so they are selected differently in this case.

.switch,
.switch {
  -moz-user-select: none;
}
.switch label input[type="checkbox"] {
  height: 0;
  opacity: 0;
  width: 0;
}
.switch label input[type="checkbox"]:not(:checked),
.switch label input[type="checkbox"]:checked {
  left: -9999px;
  opacity: 0;
  position: absolute;
}
.switch label input[type="checkbox"]:checked + .lever::after {
  background-color: #629fd9;
  left: 14px;
}
.switch label input[type="checkbox"][disabled]:checked + .lever {
  background-color: red;
}
.switch label .lever::after {
  background-color: #C0C0C0;
  border-radius: 21px;
  content: "";
  display: inline-block;
  height: 13px;
  left: 0px;
  position: absolute;
  top: -3px;
  transition: left 0.3s ease 0s, background 0.3s ease 0s, box-shadow 0.1s ease 0s;
  width: 13px;
}
.switch label input[type="checkbox"]:checked + .lever {
  background-color: #DFDFDF;
}
.switch label .lever {
  background-color: #DFDFDF;
  border-radius: 15px;
  content: "";
  display: inline-block;
  height: 7px;
  margin: 0 16px;
  position: relative;
  transition: background 0.3s ease 0s;
  vertical-align: middle;
  width: 27px;
  margin-right: 4px;
}
.switch label {
  margin-left: -15px;
}

<div class="switch">
  <label>
    <input type="checkbox">
    <span class="lever"></span>  <span>Option Unchecked</span> 
  </label>
</div>
<div class="switch">
  <label>
    <input type="checkbox" checked>
    <span class="lever"></span>  <span>Option Checked</span> 
  </label>
</div>
<div class="switch">
  <label>
    <input type="checkbox" disabled>
    <span class="lever"></span>  <span>Option Disabled</span> 
  </label>
</div>
<div class="switch">
  <label>
    <input type="checkbox" disabled checked>
    <span class="lever"></span>  <span>Option Checked and disabled</span> 
  </label>
</div>