想要更改具有选中+禁用属性的复选框的颜色，但与仅禁用属性不同

Question

我有不同的复选框具有不同的功能，效果很好。我的要求是我想"checked" & "disabled"同时更改具有属性的复选框的颜色，即我的最后一个复选框。但与其中只有属性的复选框不同，"disabled"即我的第三个复选框。先感谢您。

.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

这应该有效

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

[disabled]是一个属性，但是:checked是一个伪类，因此在这种情况下它们的选择不同。

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

.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;
}